12 ms·

Headless WYSISWYG Text Editor – tiptap editor

204 points by me_bx 5y ago

dthedavid 5y 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.
- hanspagel 5y 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.
mkl 5y 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 5y 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.
  - tobr 5y 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.
    - nightowl_games 5y ago
      I've read your post and the parent several times and I still can't understand what you mean by "it".
      - tobr 5y ago
        First “it” = the term “headless” Second “it” = the UI component branding itself as “headless” Third “it” = tiptap
- hanspagel 5y 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_games 5y ago
    "Styleless" Headless means a command line program without a GUI.
    - bitwize 5y ago
      Back in my day, "headless" meant a computer without a monitor, for example a server or a PC that had been repurposed to server duty. 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.
      - m3ta4a 5y ago
        "Headless" can also refer to a browser that doesn't render to the screen, useful for automated integration tests.
    - hanspagel 5y ago
      Then it’s styleless and markupless (that’s not a word, is it?), too.
    - gman83 5y ago
      Yeah I think the Jamstack folks have decided to use headless in an entirely different way. For example search for headless CMS you'll find loads of CMSs that just run on a server and use an API to talk to the client, but they're just web pages. It just means not WordPress I think in this context.
- philippkuehn 5y 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".
- trymas 5y ago
  > > The headless editor framework for web artisans. > This sounds like a parody. Don't forget the classic: > Made with ♥
  - hanspagel 5y ago
    What’s wrong with “Made with Love”?
    - bshimmin 5y ago
      It's a cliché and it's meaningless - it's not like you see "Made with hate" or "Made with indifference (but at least it covered my mortgage payments)".
      - hanspagel 5y ago
        Maybe it’s just not too often that people invest a few 1,000 unpaid hours in an open source project motivated by hate, I don’t know. We’ll consider to find something more meaningful than love for the footer message.
        philipswood 5y ago
        "Made with passion", and "Made with dedication" 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."
    - trymas 5y ago
      Absolutely nothing's wrong with it, but it's just am addition to parent comment on how funny some phrases sound like. 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. :)
51Cards 5y 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.
- tsujp 5y ago
  Same for me on Firefox, borked the tab got a popup to kill it.
  - hanspagel 5y 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.
    - tsujp 5y ago
      Coming back to this it looks good! I'll be looking to use this instead of Trix next time I need a WYSISWYG editor, nice job :)
- g_delgado14 5y ago
  Came here to say the same thing
- re 5y 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.
  - hanspagel 5y ago
    Would you mind to try again? It’s a fresh document now, after growing for months. It’s working smoothly for me again.
tobr 5y ago
So is this basically a wrapper around ProseMirror with more accessible documentation and fancier branding?
- hanspagel 5y 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?interval=7 https://npmcharts.com/compare/tiptap,prosemirror-state?inter...
  - tobr 5y ago
    Thanks. But doesn’t that chart show the exact opposite?
    - hanspagel 5y ago
      Sorry, tiptap is requiring prosemirror-state, too. A more accurate description would be: tiptap makes more than half the downloads of ProseMirror (and all other ProseMirror-based packages).
  - deleted 5y ago
    [deleted]
  - dan1234 5y 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.
    - jarek-foksa 5y ago
      Why not just ask users to also sponsor the ProseMirror project directly? Actually, this is what they are doing on their "Sponsor" page: https://www.tiptap.dev/sponsor/ https://www.tiptap.dev/sponsor/
    - hanspagel 5y ago
onion2k 5y ago
I've been testing SlateJS recently, which is very similar, but this looks like it could be better for my use case.
j4yav 5y ago
It looks nice but seems incredibly laggy when multiple people are connected.
- philippkuehn 5y ago
  It's pretty stable but this is the HN hug of death.
- hanspagel 5y ago
  I added three rooms to split the traffic. Works smoothly again. :-)
  - j4yav 5y ago
    Nice job, I came back a bit later and am now prototyping it for AsyncGo. Looks great!
nightowl_games 5y 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.
- hanspagel 5y 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_games 5y 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.
    - philippkuehn 5y ago
      Google Docs has a limit of 50 collaborators. I think that with 100 collaborators it’s doing pretty well considering that we’re not a billion-dollar company.
      - iCarrot 5y ago
        You could just remove the colab demo on your home/landing page, that would help more people actually access your product. The demo actually doesn't show what the paragraph above it claims (customizable, extensions, artisan etc.)
        hanspagel 5y ago
        Collaborative editing is one of the hardest problems in that field, I think it’s cool to show that one on the frontpage. 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.
YousefED 5y 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!
- philippkuehn 5y ago
  Thanks! Means a lot to us!
- topicseed 5y ago
  Been using Slate on several projects, what's the upside of tiptap2 over the latest Slate versions? Thanks!
  - philippkuehn 5y ago
    ProseMirror (used by tiptap) is way more stable and comes with different types of collaboration support (OT & CRDT)
    - WolfOliver 5y ago
      If tiptap is based on ProseMirror, what is the benefit of tiptap over ProseMirror? What value does it add?
blaydator 5y 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 !
- hanspagel 5y 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 https://www.tiptap.dev/guide/node-views/react
hanspagel 5y 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 https://github.com/ueberdosis/tiptap - What’s tiptap/why it’s special: https://blog.ueber.io/post/tiptap-public-beta/ https://blog.ueber.io/post/tiptap-public-beta/ - Discord: https://discord.gg/WtJ49jGshW https://discord.gg/WtJ49jGshW
- wrnr 5y 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 5y 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.
  - hanspagel 5y ago
    Sure, that’s possible!
pretzelhands 5y 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!
- hanspagel 5y 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 5y ago
How good is support for copy-pasting complex format from Microsoft Word? Quill we currently use struggles here.
- philippkuehn 5y 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/ https://www.tiptap.dev/examples/default/
tsar_nikolai 5y ago
I like the text editor but I love the serendipitous social experiment going on in chat room 2.
deleted 5y ago
[deleted]
deleted 5y ago
[deleted]
corentin88 5y 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 5y 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 https://prosemirror.net/docs/guide/#doc Also this is a much bigger design area then you might think.
- hanspagel 5y 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 5y ago
  As use cases vary too much, I don't think this is the browser's responsibility.
fttx_ 5y ago
Nothing meaningful to say except this looks fantastic and I can't wait to give it a try. Well done!
- philippkuehn 5y ago
  Thank you!
edem 5y 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 https://www.slatejs.org/examples/richtext
- philippkuehn 5y 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.
  - edem 5y 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?
    - hanspagel 5y ago
      Everything you can do with Slate.js, you can do with tiptap, too. 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.
      - edem 5y ago
        Thanks, I'll take a look. I'm using React + Next.js so I'm pretty happy with Slate, but I'll keep this in my bookmarks.
goldsteinq 5y ago
> It can't handle 78kb worth of emoji-fied uwu-ified bee movie script apparently
- philippkuehn 5y ago
  It’s beta. We will try to optimize that in the next releases.
  - madeofpalk 5y 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
  - goldsteinq 5y ago
    Good. Being able to handle emojified uwu-ified bee movie script is important.
ChrisArchitect 5y 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 5y 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.
- deleted 5y ago
  [deleted]
alexjray 5y 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 5y ago
  There is a version of LibreOffice that you can use online. Main code here: https://www.libreoffice.org/download/libreoffice-online/ 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/ 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 5y 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?

204 points by me_bx 5y 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.

hanspagel 5y 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.

mkl 5y 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 5y 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.
- tobr 5y 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.
  - nightowl_games 5y ago
    I've read your post and the parent several times and I still can't understand what you mean by "it".
    - tobr 5y ago
      First “it” = the term “headless” Second “it” = the UI component branding itself as “headless” Third “it” = tiptap
hanspagel 5y 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_games 5y ago
  "Styleless" Headless means a command line program without a GUI.
  - bitwize 5y ago
    Back in my day, "headless" meant a computer without a monitor, for example a server or a PC that had been repurposed to server duty. 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.
    - m3ta4a 5y ago
      "Headless" can also refer to a browser that doesn't render to the screen, useful for automated integration tests.
  - hanspagel 5y ago
    Then it’s styleless and markupless (that’s not a word, is it?), too.
  - gman83 5y ago
    Yeah I think the Jamstack folks have decided to use headless in an entirely different way. For example search for headless CMS you'll find loads of CMSs that just run on a server and use an API to talk to the client, but they're just web pages. It just means not WordPress I think in this context.
philippkuehn 5y 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".
trymas 5y ago
> > The headless editor framework for web artisans. > This sounds like a parody. Don't forget the classic: > Made with ♥
- hanspagel 5y ago
  What’s wrong with “Made with Love”?
  - bshimmin 5y ago
    It's a cliché and it's meaningless - it's not like you see "Made with hate" or "Made with indifference (but at least it covered my mortgage payments)".
    - hanspagel 5y ago
      Maybe it’s just not too often that people invest a few 1,000 unpaid hours in an open source project motivated by hate, I don’t know. We’ll consider to find something more meaningful than love for the footer message.
      - philipswood 5y ago
        "Made with passion", and "Made with dedication" 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."
  - trymas 5y ago
    Absolutely nothing's wrong with it, but it's just am addition to parent comment on how funny some phrases sound like. 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. :)

51Cards 5y 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.

tsujp 5y ago
Same for me on Firefox, borked the tab got a popup to kill it.
- hanspagel 5y 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.
  - tsujp 5y ago
    Coming back to this it looks good! I'll be looking to use this instead of Trix next time I need a WYSISWYG editor, nice job :)
g_delgado14 5y ago
Came here to say the same thing
re 5y 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.
- hanspagel 5y ago
  Would you mind to try again? It’s a fresh document now, after growing for months. It’s working smoothly for me again.

tobr 5y ago

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

hanspagel 5y 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?interval=7 https://npmcharts.com/compare/tiptap,prosemirror-state?inter...
- tobr 5y ago
  Thanks. But doesn’t that chart show the exact opposite?
  - hanspagel 5y ago
    Sorry, tiptap is requiring prosemirror-state, too. A more accurate description would be: tiptap makes more than half the downloads of ProseMirror (and all other ProseMirror-based packages).
- deleted 5y ago
  [deleted]
- dan1234 5y 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.
  - jarek-foksa 5y ago
    Why not just ask users to also sponsor the ProseMirror project directly? Actually, this is what they are doing on their "Sponsor" page: https://www.tiptap.dev/sponsor/ https://www.tiptap.dev/sponsor/
  - hanspagel 5y ago

onion2k 5y ago

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

j4yav 5y ago

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

philippkuehn 5y ago
It's pretty stable but this is the HN hug of death.
hanspagel 5y ago
I added three rooms to split the traffic. Works smoothly again. :-)
- j4yav 5y ago
  Nice job, I came back a bit later and am now prototyping it for AsyncGo. Looks great!

nightowl_games 5y 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.

hanspagel 5y 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_games 5y 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.
  - philippkuehn 5y ago
    Google Docs has a limit of 50 collaborators. I think that with 100 collaborators it’s doing pretty well considering that we’re not a billion-dollar company.
    - iCarrot 5y ago
      You could just remove the colab demo on your home/landing page, that would help more people actually access your product. The demo actually doesn't show what the paragraph above it claims (customizable, extensions, artisan etc.)
      - hanspagel 5y ago
        Collaborative editing is one of the hardest problems in that field, I think it’s cool to show that one on the frontpage. 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.

YousefED 5y 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!

philippkuehn 5y ago
Thanks! Means a lot to us!
topicseed 5y ago
Been using Slate on several projects, what's the upside of tiptap2 over the latest Slate versions? Thanks!
- philippkuehn 5y ago
  ProseMirror (used by tiptap) is way more stable and comes with different types of collaboration support (OT & CRDT)
  - WolfOliver 5y ago
    If tiptap is based on ProseMirror, what is the benefit of tiptap over ProseMirror? What value does it add?

blaydator 5y 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 !

hanspagel 5y 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 https://www.tiptap.dev/guide/node-views/react

hanspagel 5y 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 https://github.com/ueberdosis/tiptap - What’s tiptap/why it’s special: https://blog.ueber.io/post/tiptap-public-beta/ https://blog.ueber.io/post/tiptap-public-beta/ - Discord: https://discord.gg/WtJ49jGshW https://discord.gg/WtJ49jGshW

wrnr 5y 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 5y 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.
- hanspagel 5y ago
  Sure, that’s possible!

pretzelhands 5y 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!

hanspagel 5y 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 5y ago

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

philippkuehn 5y 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/ https://www.tiptap.dev/examples/default/

tsar_nikolai 5y ago

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

deleted 5y ago

[deleted]

deleted 5y ago

[deleted]

corentin88 5y 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 5y 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 https://prosemirror.net/docs/guide/#doc Also this is a much bigger design area then you might think.
hanspagel 5y 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 5y ago
As use cases vary too much, I don't think this is the browser's responsibility.

fttx_ 5y ago

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

philippkuehn 5y ago
Thank you!

edem 5y 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 https://www.slatejs.org/examples/richtext

philippkuehn 5y 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.
- edem 5y 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?
  - hanspagel 5y ago
    Everything you can do with Slate.js, you can do with tiptap, too. 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.
    - edem 5y ago
      Thanks, I'll take a look. I'm using React + Next.js so I'm pretty happy with Slate, but I'll keep this in my bookmarks.

goldsteinq 5y ago

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

philippkuehn 5y ago
It’s beta. We will try to optimize that in the next releases.
- madeofpalk 5y 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
- goldsteinq 5y ago
  Good. Being able to handle emojified uwu-ified bee movie script is important.

ChrisArchitect 5y 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 5y 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.
deleted 5y ago
[deleted]

alexjray 5y 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 5y ago
There is a version of LibreOffice that you can use online. Main code here: https://www.libreoffice.org/download/libreoffice-online/ 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/ 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 5y 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?