We were building a passwordless authentication service [1] with tools and integrations for no-code website builders like Webflow, Bubble, etc. when people started asking us to integrate with Notion. We were surprised, as we didn't expect people to build websites on Notion when there’s a lot of other website builders out there. We dug deeper and got the answer that people like Notion's WYSIWYG interface in which they can type in the editor right away, and prefer it instead of selecting a block and making edits on the pop-up forms like you do on older website builders.
Since Notion is a note-taking app rather than a website builder, we started asking Notion-to-website users what it was missing as a website builder. We heard that several important aspects of websites are not intuitive. For example, there is no default way to make buttons. The workaround is to make them use callouts and edit the CSS. Another example is navbars: you have to make them manually using columns. We saw an opportunity to present our solution so we decided to make Typedream: a WYSIWYG editor with features catered specifically for building websites.
We adopt a text editing interface, something familiar like Google Docs. We realized most people have been exposed to text editors like Google Docs or MS Word, so they know the fundamentals on how to use it, how to type, make headings, change color, add images, etc. We then added nice default styles to allow their sites to look good with no effort. And then we take care of everything else, like responsiveness, paddings, margins, etc., so they don't need to manually set different styles for different device sizes. We also decided to adopt the `/` keyboard shortcut to add new blocks on the editor to make it faster for users who are familiar with it.
Most website builders are needlessly complicated, and most of them do not adopt the familiar text-editing interface. Our interface makes building sites incredibly fast, with a low learning curve. How we’re different from other options: (1) Code: great for people who know how to code, but it takes too long for non-technical teammates to make small edits; (2) Webflow: too complicated, CSS knowledge required; (3) Squarespace: constrained to templates and not easily customizable as it looks inconsistent with the theme when you edit the template; (4) Wix, Softr: not only are you constrained to their template, it is not a WYSIWYG editor—you can only insert text on the pop-up form on the left of the editor.
Much like Notion and other block editing methods, site content is represented in a JSON format. Each block has a type, for example, a block of Paragraph would have the type "Paragraph" and would be represented by {"type":"paragraph", "text": "Hello World"}, and an image would have the type "Image" represented by {"type":"image", "url":"http://placekitten.com/200/300"}. A page consists of an array of blocks representing the blocks in the page. A page that consists of a Heading, a Paragraph, and an Image would be represented by an array of maps with types “heading”, “paragraph”, and “image” respectively. A block can also have children. For example, a block of type “Container” may have 3 children of “Paragraph” blocks. It’s very similar to the DOM structure.
This JSON value is then transformed into React components based on their types. So a block of type "Paragraph" will be rendered into a <p>, and a block of type "Image" will be rendered as an <img>, etc. We then use Next.JS to generate static pages using their ISR feature.
Our users have built websites for landing pages, product showcases, blogs, portfolios, and supplementary pages like guides, job postings, and FAQs. A lot of them are founders looking to validate their ideas by putting the word out quickly. We charge a monthly or yearly subscription and we also have a free plan!
The next steps for us would be to add a CMS functionality that connects to Notion/Airtable/built-in database, improve our site performance, and enable code export.
We would love to hear more about your experiences with website builders! What are your biggest pain points and what services do you wish existed to solve those?
Please let us know if you have questions, comments, or feedback, we'll be here all day to chat with you!
[1] We launched it here: https://news.ycombinator.com/item?id=22538578.
by Andrey
Azimov