12 ms·
Show HN: I made an open-source Notion-style WYSYWIG editor
- digilypse 3y agoVery clever that the user is prompted to use the autocomplete to read the description.
- steventey 3y agoyeah in v1 I had something like copilot suggestion model: https://twitter.com/steventey/status/1669798463289040921/video/1 https://twitter.com/steventey/status/1669798463289040921/vid... But I ended up scrapping it because it was a bit too noisy. Might add it back as an optional checkbox tho!
- billconan 3y agoI have a similar project https://github.com/shi-yan/Epiphany https://github.com/shi-yan/Epiphany
- russellbeattie 3y agoMine: https://hypertext.plus https://hypertext.plus Pure HTML document editor. Open source, PWA, based on TinyMCE, with CSS and markup editing, JS macros, saves to local drive, plus OpenAI integration if you have a key.
- JSavageOne 3y agoThe features sound great. Some advice though: - I was about to tell you that there really should be a demo, but just now I realized the "World Wide Web Phase 2 Begins Here" button links to the demo. You really should change that text to "Live Demo" or something more clear. - The demo itself takes a long time to load and seemed to refresh multiple times - The GitHub should also have a link to the demo, and an image would be nice as well - The landing page is very ugly. Any generic template would do better and inspire more confidence. - Why not highlight some of those features you mentioned on the landing page? Best of luck! The features sound great.
- russellbeattie 3y agoAww man! I liked my bespoke landing page! I thought it was a nice change from the bog standard templates. But good feedback all around, thanks!
- meesterdude 3y agothis looks nice and clean - why have you paused development? I see there are 32 github issues
- billconan 3y agoI got distracted by chatgpt and other interests.
- JSavageOne 3y agoSince we're shilling projects, this is the Notion clone I've been working on: https://mindgarden.app/ https://mindgarden.app/. It's not ready yet though, hopefully will be in a few weeks.
- steventey 3y agoWow this looks awesome! Using Lexical?
- JSavageOne 3y agoYup!
- codethief 3y agoFYI On Firefox/Android the text on your website overflows and gets cut off at the right edge of the screen, without a way to scroll horizontally.
- JSavageOne 3y agoThank you, will add that to the long list of remaining work!
- revskill 3y agoBut yours never been in top page of hackernews , why ?????
- billconan 3y agoThere are terrible bugs. I'm not ready to show it to people.
- joeframbach 3y agoDo you mind defining what "WYSYWIG" means? I tried using your tool for it. "WYSYWIG is an acronym that means++" ... "What You See Is What You Get." :thinking:
- roetlich 3y agoWYSYWIG does indeed mean "What You See Is What You Get." A WYSIWYG editor is an editor that shows the text with all formatting, exactly how it will look once it's "printed". You know, like Word or Google Docs. But unlike when you edit markdown or latex in a plain text editor. For example, writing comments on this site isn't WYSIWYG.
- deleted 3y ago[deleted]
- esafak 3y agoWYSYWIG is a typo.
- steventey 3y agoYup, it's a typo, oops :P
- gedy 3y agoWhat You See, You Won't Intuitively Get?
- toxicFork 3y agoWhat you submit yields what I get
- asymmetric13 3y agoWhat You Submit Yields What I Give
- gabereiser 3y agoThis is pretty slick. Unobtrusive prompt and then you get a pretty intrusive drop-down. Pretty it up. It has a wonderful response and flow and I would be interested in using this in future projects.
- wesleychen 3y agoThe dropdown is part of the Notion styling.
- Denwers 3y ago[dead]
- jerpint 3y agoWhat model are you using in the backend? It’s pretty fast to respond. Very nice interface
- ilrwbwrkhv 3y ago"I am an AI writing assistant that continues existing text based on context from prior text. Give more weight/priority to the later characters than the beginning ones."
- mbertschler 3y agoCouldn’t open the GitHub link on my phone. Here it is: https://github.com/steven-tey/novel https://github.com/steven-tey/novel
- steventey 3y agoYup, that's the one! :)
- digdugdirk 3y agoAre there any examples of something similar that has the ability to seamlessly interact with tables as well? Notion seems to be the only player in the space that effectively uses its tables as linkable databases, most similar products seem to either lack table functionality or they're just simple formatted text. So much of my daily work revolves around databases and Excel, I would love the ability to have multiple views of database tables embedded in a text editor, varied by context, with full backend control over the database itself. Bonus points if I could easily have scripts run on them in the background, almost like a programmatic kind of Excel.
- sleepingthom 3y agoNot the answer anyone was expecting, but SharePoint Online. Wiki pages, every list you create is a SQL table with a robust API, and the power platform is one of the best no/low code solutions available. I create full react applications around this and host the SPA in a SharePoint document library.
- 1R053 3y agoCan you recommend a good tutorial?
- sleepingthom 3y agoI will try to gather some resources later tonight. If needed I’ll type up something more comprehensive.
- sleepingthom 3y agoThe first step might actually be a non-starter for most people. Notion is free, SharePoint is usually offered as a capability within a business or school's Office 365 subscription. I believe you can either subscribe yourself for $5.00 / month using this link: https://www.microsoft.com/en-us/microsoft-365/sharepoint/compare-sharepoint-plans https://www.microsoft.com/en-us/microsoft-365/sharepoint/com..., or maybe you're lucky and already have an account with your school / work. If neither of these work for you, you can also sign up for the Microsoft Developer Program, which is actually pretty cool; here is a guide for setting up a SharePoint site through the developer program: https://www.sharepointdiary.com/2021/05/how-to-create-sharepoint-online-free-trial-account.html https://www.sharepointdiary.com/2021/05/how-to-create-sharep... I should take a moment to clarify that I'm not affiliated with Microsoft or any of the links I'm posting here in any way. I make a living building web sites and as mentioned above, many of them leverage SharePoint. I find it a pretty easy way to build intranet solutions for my customers. Assuming you've got your SharePoint site created within SharePoint Online, creating a "List" is pretty simple. Here's an article from Microsoft explaining how to do so: https://support.microsoft.com/en-us/office/create-a-list-0d397414-d95f-41eb-addd-5e6eff41b083 https://support.microsoft.com/en-us/office/create-a-list-0d3.... Think of a list as a database table. From there you can create various types of columns including "look-up" columns, which are basically joining to another table on the same site with a foreign key. I think from there you could dive into the Power Platform, but there's so much out there, I think this would be a good start.
- asymmetric13 3y agoI fear I may have broken my first “note”: ‘<<>>’ indicates where I typed ‘++’ and the resultant text is unedited. It seems as though the AI response became “stuck” on a theme, and my renewed prompts were insufficient to cause it to change / reconsider context. . . _____ Novel is a Notion-style WYSYWIG editor with AI-powered autocompletions. what backend is used for the autocompletions in Novel? The auto completions in Novel are provided by <<>> The auto completions in Novel are provided by a sophisticated backend powered by state-of-the-art AI algorithms. These start-of-the-art AI algorithms rely on underlying technology from <<>> leading natural language processing (NLP) frameworks such as OpenAI's GPT-3 and BERT. These frameworks have been trained on vast amounts of text data to have a deep understanding of language patterns and context. By leveraging the power of thesed on massive amounts of text data and are capable of generating high-quality and contextually relevant suggestions for autocompletions. The backend of Novel leverages the power of these advanced NLP frameworks to enhance the user experience and provide accurate and helpful suggestions Novel is funded by <<>> d on vast amounts of text data to understand and generate human-like text. The backend infrastructure of Novel leverages the power of these pretrained models to provide accurate and contextually relevant autocompletions. The sophisticated algorithms in the backend analyze the input text How is Nobel funded <<>> d on vast amounts of text data and have achieved impressive results in various NLP tasks. The combination of GPT-3 and BERT allows Novel to generate highly accurate and contextually relevant autocompletions for users. The sophisticated backend continuously learns what does novel cos <<>> d on vast amounts of text data to generate high-quality autocompletions. The sophisticated backend in Novel leverages the power of GPT-3 and BERT, combining their strengths to deliver accurate and contextually relevant suggestions. With GPT- It appears to be <<>> d on vast amounts of text data to generate highly accurate and contextually relevant autocompletions. The backend infrastructure of Novel leverages the power of these NLP frameworks to process and analyze user input, allowing it to generate intelligent suggestions in real-time What if I want to write about <<>> d on vast amounts of text data, allowing them to generate accurate and contextually relevant suggestions. The backend of Novel utilizes a combination of these NLP frameworks to enhance the autocompletion capabilities. With GPT-3, the system can generate coherent start a new topic <<>> d on vast amounts of text data and have the ability to generate coherent and contextually relevant suggestions. The combination of GPT-3 and BERT allows Novel to offer a highly intelligent and accurate autocompletion feature to its users. The backend architecture _____
- 1123581321 3y agoNice! Consider making so /h1 autocompletes heading 1, etc.
- steventey 3y agoYou can also do "#" as well! But yeah, better filtering for the slash command in general, noted! :)
- LoganDark 3y agoHow is it possible for the LLM completion to be so fast? I can't even run 169M RNN models that quickly.
- LoganDark 3y agoOh, it just uses OpenAI. https://github.com/steven-tey/novel/blob/62d32be43dae8aa40fab04c0c40f305646028dda/app/api/generate/route.ts#L72 https://github.com/steven-tey/novel/blob/62d32be43dae8aa40fa... ...and has a 50-request limit per day. https://github.com/steven-tey/novel/blob/62d32be43dae8aa40fab04c0c40f305646028dda/app/api/generate/route.ts#L22 https://github.com/steven-tey/novel/blob/62d32be43dae8aa40fa... ...and trims the content to, um. 500 characters?! https://github.com/steven-tey/novel/blob/62d32be43dae8aa40fab04c0c40f305646028dda/app/api/generate/route.ts#L46 https://github.com/steven-tey/novel/blob/62d32be43dae8aa40fa... So past a certain point you'll get the same completion repeatedly / a completion of the start of your document, cut off.
- awayto 3y agoI think the nature/feel of the quick response is likely due to the fact the completion call is streaming "stream: true" [1]. Then, they are parsing it back to text as it streams the response back. [1] https://github.com/steven-tey/novel/blob/62d32be43dae8aa40fab04c0c40f305646028dda/app/api/generate/route.ts#L67 https://github.com/steven-tey/novel/blob/62d32be43dae8aa40fa...
- LoganDark 3y agoI'd have been more surprised if there wasn't streaming. All the LLMs I have ever used, stream tokens in real-time. I'm talking about the time spent per token.
- steventey 3y agoOh yeah good catch – just bumped up the character limit to 5,000 (forgot I just upgraded to gpt-3.5-turbo-16k today) :)
- unshavedyak 3y agoTangent: On the note of web based text field for "normal users", what's the best UX you can get while also trying to be as no-JS-friendly as possible? Are there CSS-only tricks to make editing in an input field nice? I'm making a low-JS site, but it also has a lot of input fields, user content generation, etc. In "modern CSS" i feel like Input boxes should be better than they are. Is JS the only way?
- z3t4 3y agoWith contenteditable="true" you get a decent rich text editor. It is however a headache to get consistent output in different browsers.
- robertoandred 3y agoWhat issues specifically? In general, :has and :user-invalid are new and can be useful styling forms.
- unshavedyak 3y agoNo real issues i think, but take this HN input box i'm typing in now. It's .. okay, like.. it's about as barebones as you can get. CSS has seen a ton of advancements in just about every area (it feels like atleast. As a backend dev), but yet this HN box still feels them same as it did in 1995 heh. I see so many huge JS beasts with WYSIWYG features that i'm unsure what advancements, if any, have been made for CSS to provide something nice. Something that a user would feel it's more than nothing done at all. The HN box feels like nothing at all. Just a plain HTML input text area.
- charrondev 3y agocontent-editable is a crap shoot without some JS layer on top of it normalized the output. Otherwise you end up with the same visual output being able to defined as 50 different inputs. The other thing is content editable allows all kinds of garbage to be pasted into it included any kind of inline style. Now I maintain a fork of Htmlawed which can do a pretty decent job of filtering down arbitrary HTML into a safe and restricted subset but with no JS there can be a huge disconnect between what the user sees in their editor and what appears as the sanitized output. As a result I’m currently using SlateJS as a rich text editor foundation. I’ve used others in the past but this is the nicest so far.
- topicseed 3y agoWhat if I need to type a note with C++ in it? ;)
- Blahah 3y agoNot sure why that seems like a challenge, but it's trivial since 2001. Use a codeblock.
- ithkuil 3y ago++ triggers AI autocomplete; a whole wall of text of autocomplete. So the question was likely: how to write the word "C++" in your prose (as opposed to writing some C++ code)
- steventey 3y agoGreat question – all you need to do is hit CMD+Z or Esc when the generation starts and it automatically aborts it and gives you your "++" back! Here's the code for it: https://github.com/steven-tey/novel/blob/main/ui/editor/index.tsx#L178-L199 https://github.com/steven-tey/novel/blob/main/ui/editor/inde... I've debated between "++" vs "+++", but settled for ++ since it's lesser keystrokes (at the risk of conflicting with more common words/phrases) haha
- Kiro 3y agoI see you're using the Vercel AI SDK but wasn't that released like yesterday?
- leodriesch 3y agoOP works for Vercel so I assume they had early access.
- rtpg 3y agoAt the risk of sabotaging stuff I've worked on, it's _astoundingly easy_ to glue together Y.js, prosemirror, and a little bit of express.js to get a distributed Notion clone with conflict free resolution. Like I have something that I got working in 3 days with multiple pages, so links between things, and cursor syncing (most of this work is provided by wonderful people with full-featured libraries!). There's some trickiness with how Y.js actually works (in particular map ID conflict resolution meaning you don't want a dictionary of page names to pages but UUIDs and then some sort of manual revision checking....). But you can get that and probably with a bit more work get ~instant search and the like. All with free offline capabilities. Of course then I stared at this and was like "I like notion because it looks nice" (I personally don't care about the AI stuff or the database stuff), so just went and paid for notion for my family usage.
- JSavageOne 3y agoWould love to see a demo and/or the code if you were open to open-sourcing it! I'm sure there's someone out there who'd be willing to contribute to the styling.
- YousefED 3y agofyi, from my experience it’s still quite a lot of work to build on top of Prosemirror and TipTap directly to do so. So I’ve started working on https://www.blocknotejs.org https://www.blocknotejs.org to make this even easier for developers; its a batteries-included library with Notion style UI elements out of the box. Definitely bullish on this ecosystem including Yjs and local first dev!
- danielvaughn 3y agoI built on the same stack and have a similar opinion. It’s only easy if you’re depending on the webrtc implementation. If you’re coordinating changes across your own server, you gotta put in some work.
- rtpg 3y agoI did not rely on the webrtc implementation. Really you gotta do a lot of "echo server"-style shraing of messages and some sync messages from time to time but Yjs/CRDT stuff works pretty smoothly on this front. But my requirements are pretty loose
- newhotelowner 3y agoPretty awesome. Wish, it doesn't rely on any framework and can be plug & play with other frameworks.
- steventey 3y agoTiptap, of which Novel.sh is built on top of, has cross framework support I believe (React, Vue)! Novel is fully open-source so feel free to check out the code and plug and play into your framework of choice: http://novel.sh/github http://novel.sh/github
- nittanymount 3y agonice !
- cubefox 3y agoFor a text editor like this a base LLM would be more appropriate, one that does just autocomplete, without being instruction tuned. Unfortunately these base models are either unavailable (GPT-4), outdated (GPT-3/davinci) or otherwise restricted (GPT-3.5 aka code-davinci-002 is only available via Microsoft Azure and more expensive than the instruction tuned GPT-3.5-turbo model).
- Spivak 3y agodivinci-003 is outdated? I actually switched back to it after trying gpt4 for a while because I thought it was too assistant-y. I have a switch to use gpt4 when I feel like I need it to be smarter but I rarely reach for it.
- cubefox 3y agoThere is no model called "davinci-003". I was talking about "davinci", aka GPT-3 175B. You are probably talking about "text-davinci-003", which is an instruction tuned version of the base GPT-3.5 ("code-davinci-002"). https://platform.openai.com/docs/model-index-for-researchers https://platform.openai.com/docs/model-index-for-researchers
- steventey 3y agoHello Hacker News! Maker of Novel.sh here! First of all, apologies for the typo lol, apparently I can't spell "WYSIWYG" :') Some context: I've always been a huge fan of Notion's editor, and since Vercel launched the AI SDK yesterday (https://sdk.vercel.ai/docs https://sdk.vercel.ai/docs), I decided to take this as an opportunity to recreate Notion's block editor + incorporate some of Notion's latest AI features with `npm i ai` Here's basically how it works: 1. Tiptap Editor setup with custom slash command extension 2. `useCompletion` hook at the parent editor + the slash command menu – using `id` to share states 3. `/api/generate` route to stream responses from OpenAI Novel also handles image uploads via drag & drop / copy & paste. Images are stored as base64 strings in localStorage currently, but I'm planning to implement uploads to Vercel Blob in the future. The code is fully open-source – feel free to check it out: http://novel.sh/github http://novel.sh/github Hope y'all like this – let me know if you have any feedback!
- idk1 3y agoIt's ironic that after posting a text editor you can't edit the text in your title.
- bosky101 3y agoThe best self hosted alternative of Notion I have found is Outline[1] The link describing the infra[2] is an example of how it looks. [1] github.com/outline/outline [2] https://docs.getoutline.com/s/hosting/doc/requirements-ULdYnwi4wG https://docs.getoutline.com/s/hosting/doc/requirements-ULdYn...
- justinmayer 3y agoThis project is not open source but instead uses the “Business Source License”. I only mention this in case open source is something that is important to you.
- SahAssar 3y agoI hadn't heard of the “Business Source License”, but reading it makes it seem pretty scary. Basically any usage of the software that could be considered production is prohibited, which probably could even mean personal usage in a non-development fashion.
- msla 3y ago> Novel is not just your average WYSIWYG editor; it takes things to a whole new level with its AI-powered autocompletions. With the seamless integration of Tiptap, OpenAI, and the Vercel AI SDK, it can fuck up your prose in ways you never thought possible. Imagine effortlessly composing sentences that flow with elegance and precision, as if written by a seasoned wordsmith. Novel's AI-powered autocompletions analyze your writing style, context, and even the tone you want to convey if you're a complete idiot. Novel's autocompletions are designed to enhance your writing experience by seamlessly integrating AI technology. Whether you're a professional writer or a beginner, Novel's intuitive interface and powerful features make it easy to compose engaging and polished content. With the combined bullshittery of AI and your own incompetence, you can now create literary disasters that will leave readers scratching their heads in confusion. But hey, at least it's all in the name of innovation, right? The italics are mine. Pretty good.
- steventey 3y agoHa, I love your parts! Now the tricky part is to get the AI to be as witty as you… :P Thanks for playing around with Novel!
- krembo 3y agoAny suggestions for a vscode extension that allows editing markdown files in the same wysiwyg way?
- steventey 3y agoNot sure about VSCode extension but I’ve used Typora for the longest time and they’re really good!!
- jeron 3y agoif this project gets pages and tables, it could be an open source notion killer
- steventey 3y agoOoooh will look into adding tables
- deleted 3y ago[deleted]
- ianberdin 3y agoInteresting, In a near future will we see headers like: "X but completely free forever" instead of "X but open source"? Just curious.
- nickstinemates 3y agoIf anyone wants to try this in their own env, I published a docker image on dockerhub. `docker run -p 3000:3000 keeb/novel`. To generate the image, I simply cloned the provided github URL and used the nextjs Dockerfile[1] and removed all of the cruft. The Dockerfile is available here[2]. 1: https://raw.githubusercontent.com/vercel/next.js/canary/examples/with-docker/Dockerfile https://raw.githubusercontent.com/vercel/next.js/canary/exam... 2: https://keeb.dev/static/novel-Dockerfile https://keeb.dev/static/novel-Dockerfile
- lannisterstark 3y agoYou should look at outline. https://github.com/outline https://github.com/outline
- Eun 3y agoAnyone has an alternative where I can use simple markdown files (in a folder or google drive) as the primary datasource? I am using obsidian on the Mac, but on the go I have no real solution. (I want to avoid using the obsidian mobile app because it forces you to use Obsidian Sync)
- rchaud 3y agodemo.logseq.com It's a web version of the Logseq software, it can import a local folder of MD notes.
- codethief 3y ago> it forces you to use Obsidian Sync How so? I use Obsidian on both my laptop and my phone and sync my files using Syncthing. You could probably also use Dropbox something.
- GraemeMeyer 3y agoYou need to use Obsidian Sync if you have an iPhone. IIRC it’s because the third-party storage APIs are limited on iOS in such a way that makes it non-feasible for Obsidian. Something about bulk editing/access.
- TillE 3y agoObsidian works just fine with iCloud.
- appleflaxen 3y agoThis is a super cool project! And I love the super-simple Vercel deployment. I wasn't able to get the AI completions to work with my OpenAI API key; not sure why. I don't completely understand how I'm supposed to use this as a stand-alone deployment if I can't create more than one page. I think the answer is just that the project is young, but I'm not certain.
- Denwers 3y ago[dead]
- Denwers 3y ago[dead]
- as90 3y agoThis is an awesome project!
- manchmalscott 3y agoI’ve basically completely stopped using notion after they crammed “AI” in there with absolutely no option to turn it off without a business tier plan (even more $$$ than the personal). If I want to use chat gpt I’m gonna open that in a completely separate window and interact with it there, I cannot stand LLMs being unceremoniously shoved into seemingly every pre-existing tool I use.
- russdpale 3y agothe autoplay, just no. what in gods name, why?