Headless WYSISWYG Text Editor – tiptap editor

https://www.tiptap.dev/

by me_bx • 5 years ago

204 108 5 years ago

dthedavid• 5 years ago

This looks really nice, especially collaborative editing. I've been playing around with draft.js and also looked at other libs.

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.

hanspagel24• 5 years ago

We don’t provide any controls, you can use a native select or whatever you need and I don’t see a reason why that shouldn’t work. tiptap just gives you an API to apply styles, check for styles and so on.

Good point though, we should put together an example that showcases that.

mkl2• 5 years ago

The headless editor framework for web artisans.

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.

gls2ro• 5 years ago

I wish people will stop using headless in all kind of contexts. It does not help understanding how the project works.

What is headless? Who come in this case CSS is a "head"? I would say HTML is the head.

tobr4• 5 years ago

In the context of UI components it has taken on the connotation that it mainly handles interactivity, state, performance, accessibility, cross-platform support and similar functional aspects, while leaving decisions about the visual design to you.

EDIT: And it does allow you to customize both styling and markup, as far as I understand.

hanspagel24• 5 years ago

Hi, co-creator of tiptap here and the one who wrote the heading:

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

nightowl_games4• 5 years ago

"Styleless"

Headless means a command line program without a GUI.

lelanthran2• 5 years ago

Give me a better word that’s know to more people, I’d love to change it!

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.

mkl2• 5 years ago

Well I'm probably not really in the target audience, so take my confusion with a grain of salt if those are widely used terms among those who are. The list of features in your other comment does sound pretty appealing though. Maybe the site should have something like that as a column down the side or something - I would have immediately understood instead of coming here and complaining about headlines!

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.

SahAssar• 5 years ago

Style-agnostic is probably what I would go with.

austinjp• 5 years ago

Instead of "headless", which I agree is confusing, perhaps instead: bare-bones; unstyled; fully customisable; extensible; unopinionated (maybe).

"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 :)

yoshyosh• 5 years ago

headless instantly made sense to me, I was thinking of it like contentful/headless shopify even if there is a little bit of a gui. I interpreted it as something I'd have maximum control over in just one word.

gumby2• 5 years ago

I use headless editors every day, mainly ed and sed. This appears to have little relationship to that word.

It still can be a good product, but it would be more useful to have a description that reflected its use and benefit.

philippkuehn9• 5 years ago

The term "headless" is widely known in the React world for components where I have full control over markup and styling. In the Vue world, this is usually called "renderless". We have then decided to use the term "headless".

trymas2• 5 years ago

> The headless editor framework for web artisans. This sounds like a parody.

Don't forget the classic:

Made with ♥

hanspagel24• 5 years ago

What’s wrong with “Made with Love”?

51Cards• 5 years ago

Not sure if this is a known issue but I tried to load the site 3x in Firefox. Caused the tab to stop responding with a "Script is slowing down Firefox" error. Each time I had to close the tab. Opened the site in Chrome with no issue.

tsujp2• 5 years ago

Same for me on Firefox, borked the tab got a popup to kill it.

hanspagel24• 5 years ago

Some people pasted whole books into the editor. In combination with more than 100 people using it concurrently, that’s not working that well. I limited the character count, it should be way more performant now.

g_delgado14• 5 years ago

Came here to say the same thing

re• 5 years ago

The collaborative editor seems seems to be struggling with the load test of visitors, combined with some people putting a lot of content into the editor--it looked like the entire Bee Movie script was in there.

hanspagel24• 5 years ago

Would you mind to try again? It’s a fresh document now, after growing for months. It’s working smoothly for me again.

hanspagel24• 5 years ago

Yeah, the document loaded in the editor is nearly 1 MB by now. This document has grown over the last months. Over the last days there were 100 users concurrently typing in the document, some times pasting in 20k words, deleting it, pasting it in again … And Y.js (what we use) stores the whole history, and currently is blocking the main thread until the first state is downloaded and applied.

I create a new document, wait a moment …

mrvenkman• 5 years ago

Same issue: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0

tobr4• 5 years ago

So is this basically a wrapper around ProseMirror with more accessible documentation and fancier branding?

hanspagel24• 5 years ago

Yes, it’s a wrapper around ProseMirror, but a fairly popular one. tiptap 1 has more downloads than ProseMirror and all other ProseMirror based npm packages together. [1]

[1] https://npmcharts.com/compare/tiptap,prosemirror-state?inter...

tobr4• 5 years ago

Thanks. But doesn’t that chart show the exact opposite?

dan1234• 5 years ago

I see you have quite a few sponsors. Does any of that money make it’s way to ProseMirror? I couldn’t find your logo on their website.

j4yav3• 5 years ago

It looks nice but seems incredibly laggy when multiple people are connected.

philippkuehn9• 5 years ago

It's pretty stable but this is the HN hug of death.

hanspagel24• 5 years ago

I added three rooms to split the traffic. Works smoothly again. :-)

j4yav3• 5 years ago

Nice job, I came back a bit later and am now prototyping it for AsyncGo. Looks great!

nightowl_games4• 5 years ago

This product looks useful and the website looks beautiful while having horrible performance on my (pixel 1) phone.

It perfectly encapsulates the era of computing we are in.

hanspagel24• 5 years ago

Not sure if looking on your mobile at a document where more than 100 people are typing should be the performance benchmark for it though.

nightowl_games4• 5 years ago

I work on a game that runs in a browser on mobile and synchronizes a physics simulation with orders of magnitude more relevant data. That's the benchmark upon which I scoff.

YousefED• 5 years ago

Happy sponsor here. Started exploring the (previously closed) beta a number of weeks ago, and its really a pleasure to work with.

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!

philippkuehn9• 5 years ago

Thanks! Means a lot to us!

topicseed• 5 years ago

Been using Slate on several projects, what's the upside of tiptap2 over the latest Slate versions? Thanks!

philippkuehn9• 5 years ago

ProseMirror (used by tiptap) is way more stable and comes with different types of collaboration support (OT & CRDT)

blaydator• 5 years ago

Using v1, and custom nodes with vue components are very powerful and gives even more flexibility. Glad they are more than advertised in v2 and got more care. Can’t wait to migrate. Well done !

hanspagel24• 5 years ago

Thanks! Join the Discord if you need help upgrading your app. Node views are way more robust in v2 (and we added support for React, too [1]).

[1] https://www.tiptap.dev/guide/node-views/react

hanspagel24• 5 years ago

Thanks for posting the new documentation on HN! Co-creator here.

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

greendream17• 5 years ago

Was wondering what makes this different form prosemirror but it looks like it uses it, why would I use this instead? For sure pm is hard at first but once you get the system it's like a new superpower.

CGamesPlay• 5 years ago

Can I build a Typora-like editing experience? Specifically, I want nodes where the visibility depends on the caret position. This requires mutating the DOM of the editable area in response to cursor movement, which wreaks havoc on a lot of the existing WYSIWYG editors.

hanspagel24• 5 years ago

Sure, that’s possible!

miohtama• 5 years ago

How Tiptap does HTML cleaning and sanitizing from different browsers? E.g. edit rich text tables in IE and after this editing them in Safari could be broken. This has been an acute pain for all WYSIWYG editors for the last 20 years. Especially ProseMirror shines to solve this problem as it encodes everything to Markdown.

marijn• 5 years ago

Tiptap builds on ProseMirror, so it uses the same approach.

bhl• 5 years ago

The default way to persist a ProseMirror doc is JSON. There is a way to serialize that to Markdown via the prosemirror-markdown package, but not every node can be represented as plain text. You can also use html without a non core package since each node has to define a toDOM and parseDOM method.

j4yav3• 5 years ago

A straightforward example showing how to set things up to replace a textarea on a web form would be really nice.

pretzelhands• 5 years ago

Oh hey! I remember building my own app on top of tiptap last year and having a blast with it!

Glad to see that it got a polished new update! I’ll definitely have to look into it. Good job, guys!

hanspagel24• 5 years ago

Notebag is really cool! Let me know if you’d like to have a chat about the new version or need help upgrading it.

methyl• 5 years ago

How good is support for copy-pasting complex format from Microsoft Word? Quill we currently use struggles here.

philippkuehn9• 5 years ago

Most things should work fine. I do not have Word installed right now but if you want to do a test, try to paste some content in a basic editor like this one: https://www.tiptap.dev/examples/default/

tsar_nikolai• 5 years ago

I like the text editor but I love the serendipitous social experiment going on in chat room 2.

corentin88• 5 years ago

It’s really something I don’t understand that the web browsers haven’t come out yet with a decent API to implement a WYSIWYG editor in a website.

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.

wrnr• 5 years ago

execCommand was used to add rich text to web mail clients, it's fine for writing once but not exchanging documents between browsers because of different interpretations at to what the commands do and how they handle nested tags ala <i><b></b></i> or <b><i></i></b>. Anyway prosemirror has a schema that provides extra info to how the tags should be handled: https://prosemirror.net/docs/guide/#doc Also this is a much bigger design area then you might think.

hanspagel24• 5 years ago

I’d love to see a more stable implementation of contenteditable, but I think it’s great to have all those choices. Use cases vary just too much.

xavierlint• 5 years ago

As use cases vary too much, I don't think this is the browser's responsibility.

onion2k• 5 years ago

I've been testing SlateJS recently, which is very similar, but this looks like it could be better for my use case.

fttx_• 5 years ago

Nothing meaningful to say except this looks fantastic and I can't wait to give it a try. Well done!

philippkuehn9• 5 years ago

Thank you!

edem3• 5 years ago

How does this relate to [Slate.js][0]? Why would I use this over Slate? The most important part is the data model. Slate gives you the ability to edit not only HTML but anything you can come up with. How does tiptap relate to this?

[0] https://www.slatejs.org/examples/richtext

philippkuehn9• 5 years ago

ProseMirror (used by tiptap) is way more stable and comes with different types of collaboration support (OT & CRDT). Data is stored as JSON as well. But you can import/export good old HTML too.

edem3• 5 years ago

This doesn't answer my question: how does the model differ? Does tiptap use a similar "can write an editor for anything since everything is abstract" concept?

goldsteinq2• 5 years ago

It can't handle 78kb worth of emoji-fied uwu-ified bee movie script apparently

philippkuehn9• 5 years ago

It’s beta. We will try to optimize that in the next releases.

madeofpalk• 5 years ago

"problem" is that you have a live editor shared across everyone on the homepage, and the editor is main thread blocking so it slows down the entire page

goldsteinq2• 5 years ago

Good. Being able to handle emojified uwu-ified bee movie script is important.

ChrisArchitect• 5 years ago

all this griping about 'headless'. Look around, the term is very common these days pertaining to static website development, Jamstack, headless CMSes etc.

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.

hparadiz• 5 years ago

Headless doesn't mean no stylesheets. It means no gui at all. This project is not headless at all. It is not possible to make this thing headless. It's head is sticking right there.

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.

alexjray• 5 years ago

Good stuff.

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.

mbreese• 5 years ago

There is a version of LibreOffice that you can use online.

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.

pupppet• 5 years ago

I appreciate these free WYSIWYG editor projects but 'headless' is just another way of saying you need to build all of the tricky stuff yourself. Where's the out-of-the-box anchor functionality? How often do you not need to link text?

Headless WYSISWYG Text Editor – tiptap editor

Related Stories