Headless WYSISWYG Text Editor – tiptap editor
tiptap.dev
tiptap.dev
tiptap v1 was pretty popular (more than 6M downloads) and an amazing community formed around it. It’s used in GitLab, Nextcloud, Statamic … and tons of other popular apps. But it was built 3 years ago, coupled to Vue, and had an awful documentation.
We couldn’t help but work on a new version over the last months and basically incorporated all the feedback that came up over the last years. We’ve been in a private beta for 4 months now, with sponsors and regular contributors. Now, we’re in public beta and can’t would like to hear what you think!
Here are a few things you can do with tiptap v2:
- Use with Vanilla JS, React, Vue, Alpine, Svelte …
- Bring your own markup and CSS
- Use Markdown shortcuts
- Render Vue or React components inside the editor content
- Use Vanilla JavaScript to render interactive things inside the editor
- Add collaborative editing capabilities
- Build offline-first apps
- Add autocompletes, for example for @mentions
- Use it with Tailwind CSS
- Automatically fix typographic mistakes (optional, as everything else)
- Add resizable tables
- …
Here are a few links to get started:
- Repository: https://github.com/ueberdosis/tiptap
- What’s tiptap/why it’s special: https://blog.ueber.io/post/tiptap-public-beta/
- Discord: https://discord.gg/WtJ49jGshW
And browsers have taken the completely opposite way actually, with the recent deprecation of execCommand.
WYSIWYG is really the basic of tons of app, I would say as much as showing an <input> or using a <select>. And contenteditable hasn’t been of any help, it’s worse in fact.
Where I work, we decided to use Google Closure editor, which is really powerful, but is undocumented and adds like dozens of kbs to our app.
I really hope some day we wouldn’t have to rely on a third party dependency to implement an <input>. With how things have gone with WYSIWYG editor, I wouldn’t be so surprised though.
It just means this editor is decoupled from any particular backend or presentation output -- it's just the editor that can be implemented/used regardless of the greater system you're developing for.
It's trying to create a new definition of what the word means.
Just say "no stylesheets included". That's 100x more clear what's going on.
Have worked with Slate and Prosemirror before, and it feels like tiptap2 hits a better balance; easier API and better documentation. All built on top of the proven prosemirror, so if you need to its still possible to dive into the underlying tech. Great job guys!
I create a new document, wait a moment …
How does this handle maintaining text selection while interacting with a drop down list (ex. font size drop down, link editor with pop over)? Google docs handle this really well. It would be nice to see this in the docs.
Good point though, we should put together an example that showcases that.
I would love to see the open source community get together to create a web based open source version of Microsoft Word rather than hundreds of basic text editors.
Even adding something as basic as "Pages" would help move this in that directions as it would open up the ability to export to actual document types like PDF and DOCX.
Main code here: https://www.libreoffice.org/download/libreoffice-online/
But this doesn't include some of the batteries. For that, you'd look here: https://www.collaboraoffice.com/code/
Where they offer a downloadable on-premise applicance (Docker) you can use. They also have a hosted version, if you'd rather just use their infrastructure.
[1] https://npmcharts.com/compare/tiptap,prosemirror-state?inter...
tiptap makes more than half the downloads of ProseMirror (and all other ProseMirror-based packages).
That said, we’re sponsoring other related open source projects, for example Y.js already.
Glad to see that it got a polished new update! I’ll definitely have to look into it. Good job, guys!
It perfectly encapsulates the era of computing we are in.
The demo actually doesn't show what the paragraph above it claims (customizable, extensions, artisan etc.)
And the demo shows how you can customize the styling, the power of extensions and how that all can be put together in a custom way. But maybe it doesn’t communicate all that very well.
Keep in mind it’s an MIT-licensed open source project, we just launched two days ago and we didn’t even post it here.
Some things are even easier in tiptap, some are better supported (collaborative editing), and Slate.js is only available for React, but tiptap is framework-agnostic.
If you’re happy with Slate: That’s fine, it’s an amazing editor. For some use cases, tiptap is probably better suited, though, but that highly depends on your use case.
This sounds like a parody. What does "headless" mean in this context? It clearly has an interface, so it's not like a headless browser. Edit: I got the styling link to load now. They just mean no CSS.
And what distinguishes a "web artisan" from a person who types? Edit: oh I think the web artisan is just the web developer who uses this on their page, not the person who uses the editor.
For a headline it doesn't seem to communicate well.
What is headless? Who come in this case CSS is a "head"? I would say HTML is the head.
EDIT: And it does allow you to customize both styling and markup, as far as I understand.
Second “it” = the UI component branding itself as “headless”
Third “it” = tiptap
We went with “renderless” for tiptap v1, but this is not really correct and a lot of people switched to “headless”.
Give me a better word that’s know to more people, I’d love to change it!
With web artisans I wanted to point out it’s for people who really care about every detail.
If you just want to slap in an editor and that’s it: tiptap is not for you. If you want to really customize every aspect of the editor: You should definitely consider using tiptap.
Edit: typo
Headless means a command line program without a GUI.
We also had the opposite: before Xrandr or Xinerama, there was an older X feature called "Zaphod Mode" that allowed you to drive a graphics card's multiple outputs (on cards that supported such) mapping each to a different X "screen", Zaphod Beeblebrox, of The Hitchhiker's Guide to the Galaxy, had two heads, you see.
It just means not WordPress I think in this context.
Thank you for being flexible :-)
Headless literally means "gui-less" (without a gui) and has had the same meaning since 1998 or so so it's probably not a good idea to reuse the word to mean something else in the same context.
I would go with either "style-less" (which is a bit awkward to say") or "effortless", which is better even if not totally accurate.
With "effortless" you fully capture how easy it is to use.
> With web artisans I wanted to point out it’s for people who really care about every detail.
You can keep artisan - it looks correct in this context.
Styleless is bad because to be without style is to be bad.
the effortless editor you can customize every aspect of.
"non-opinionated WYSISWYG Text Editor" ?
Unless I misunderstood the example, all you have to do is instantiate it to make it work with a default look.
If "using the API" is headless, then everything is headless because they all have an API, including things like Qt, WxWidgets, etc. This is obviously not the case.
The package comes without CSS and markup as explained on the frontpage.
> Headless > It’s headless and comes without any CSS. You are in full control over markup, styling and behaviour
It has an API, but after a quick peek at the page, I wouldn't say it 'is' an API. I'd call it a library.
Maybe you could explain it's a backend for an editor.
Or maybe "unstyled"?
I saw the title of this story and assumed that tiptap was going to be a component that somehow backed up various WYSIWIG editor-clients. That would be headless. (It's even useful -- the transaction system + collaboration server is theoretically a thing that could back up other clients, after all, though in practice it's going to force enough design decisions onto the clients that it's not really worth it.)
Tiptap does come with a graphical user interface, insofar as it looks like the most minimal possible use of it (from your "Minimal setup" example) will create a contenteditable surface to write in. Said surface is the "head".
I'd consider "flexible", "customizable", or "unopinionated". "Unstyled" was suggested, but although it's true I think it's misleading -- the need to construct your own toolbar goes beyond what that implies.
I'd call it "stylable", "freely stylable", "add your own CSS", "DIY CSS" or similar, as they seem like they mean what you're talking about even to people who haven't run into them before.
Artisanal to me suggests obviously handmade and deliberately unpolished (as a stylistic choice, not a negative). The immediate image that sprang to mind was pottery with finger marks in it, so I was a bit lost with "web artisan". The strengths of tiptap seem to be the flexibility and customisability, and realtime collaboration, so a word that got that sort of thing across would communicate more.
"Artisan" seems fine, although it's slightly obscure. Perhaps instead: control-freak; obsessive; perfectionist. They are somewhat negative, but they're also points of pride for some.
So for example: tiptap, the fully customisable editor for website perfectionists.
Just some suggestions :)
It still can be a good product, but it would be more useful to have a description that reflected its use and benefit.
Don't forget the classic:
> Made with ♥
We’ll consider to find something more meaningful than love for the footer message.
Both don't have Unicode emoticons.
Nothing wrong with:
"Made with ♡"
Awesome thing about advice and criticism - you can decide to ignore it.
Do "Made for the ♡ of (unicorn emoticon)" if it floats your boat.
This is a common signal for "I care about my [front-end] work."
Anyone can write whatever they want and name their projects however they want.
"Fastest standalone headless framework. Powered by AI. Written in TypeScript, coded with love in San Francisco Bay, by @kode_ninja using VSCode."
I write this with no offence. Just always have a chuckle while reading phrases like parent commenter and I commented on. :)