[HN Gopher] Launch HN: Typedream (YC W20) - WYSIWYG website builder
___________________________________________________________________
Launch HN: Typedream (YC W20) - WYSIWYG website builder
Hi HN, we are Putri, Anthony, Michelle, Kevin, and Albert from
Typedream (https://typedream.com). We make a website builder with a
familiar text-editing interface that makes building websites fast
and easy. You can see a bunch of examples here:
https://typedream.com/showcase. 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.
Author : putrikarunia
Score : 60 points
Date : 2021-11-02 17:19 UTC (5 hours ago)
| naderkhalil wrote:
| This is a really powerful tool. The interface is so slick,
| honestly hats off, well done!!
| putrikarunia wrote:
| Thank you!
| krembanan wrote:
| Wow, this is really well done. Seems like you have some very
| talented React developers on the team :)
| putrikarunia wrote:
| Thank you!
| pwillia7 wrote:
| Awesome!
|
| Since this is using next, could you build an ecommerce site using
| this and the next integrations?
|
| Does this support PWA?
|
| You guys should have presented at nextjsconf last week!
| putrikarunia wrote:
| You can't build an ecommerce site yet, but we are building the
| CMS feature that would allow you to do this somewhat. What do
| you mean by next integrations?
|
| It doesn't support PWA yet. Do you have input on this?
|
| And yes presenting on nextjsconf would have been really cool!!
| pwillia7 wrote:
| Thanks!
|
| Next JS has a starter kit for a few different platforms
| called nextjs commerce - https://nextjs.org/commerce
|
| Getting to PWA would probably be pretty simple since you just
| need a service worker to qualify if I remember right --
| https://developers.google.com/web/ilt/pwa/introduction-to-
| se...
|
| Making PWA valuable and doing things like prefetching pages
| would probably be a much bigger task but is really incredible
| to see live from a performance perspective. Here's a headless
| commerce-enabled PWA with prefetching to see what I mean.
| https://discountelectronics.com/
| putrikarunia wrote:
| Oh that's awesome, thanks for sharing this to me!
|
| I see, I personally haven't played around with PWA much,
| but that sounds like something we should look into, thank
| you!
| ryanSrich wrote:
| Interesting UX.
|
| Certainly more complex sites would need more complex controls. I
| have a love hate relationship with Webflow. On one hand I'm much
| faster coding HTML and CSS by hand, but Webflow handles the
| things I don't want to handle. Stuff like collections,
| pagination, forms, etc. Can I build all of those things? Sure,
| but it's a waste of my time if I can click a button and get a
| form up that sends me an email in less than 30 seconds.
|
| There are so many things that Webflow does not do though. Stuff
| like excluding pages from an autogenerated sitemap (no idea how
| this isn't a feature), sending a follow up email when someone
| submits a form (I need to use Zapier to do this), gaited content
| that's user specific (something like memberstack, but better),
| more control over managing large numbers of pages. Like if I want
| to add a word to every page title instance of every page, I have
| to go into every single page's settings and update it. For a site
| with 100+ pages it's not feasible. I could list a dozen other
| missing features.
|
| So do you see Typedream competing with Webflow, and getting into
| more complex controls, and even building some of the integrations
| you have listed as native features (which I'd personally love so
| I don't have to have 1000 subscriptions just to run a marketing
| site), or is the vision to stay simple, and target other use
| cases?
| putrikarunia wrote:
| Interesting question, to be honest we're still navigating this.
| Our goal is to stay simple, while reaching feature parity with
| other website builders.
|
| We want to take a different UX approach to most of the features
| necessary for website building, to make sure beginners can make
| a functional website with almost no learning curve. Of course,
| that's a huge challenge :D.
|
| And yes, we do plan on building the frequently-used
| integrations as native features. Our plan for the near future
| is to build a native CMS, forms, gated content like
| Memberstack, some simple animation, and email newsletter. We're
| sort of taking inspiration from Ghost & Notion on UX, and
| SquareSpace/Webflow/etc for features.
|
| However, we probably are not competing directly with Webflow,
| as our target users are quite different. Webflow seems to
| target designers that require complete control over every
| pixel. While for us, we focus more on builders/founders that
| want to get something out fast while keeping sites looking
| pretty & modern by providing design defaults.
| sandGorgon wrote:
| > _Like if I want to add a word to every page title instance of
| every page_
|
| This is interesting. what is the usecase here ? what other
| similar kinds of stuff do u need to do ?
| ryanSrich wrote:
| Well an easy use case is a name change, or even a convention
| change. Let's say I have 100 pages that have titles like
| this:
|
| <COMPANY NAME> | <PAGE NAME> | <CONTENT>
|
| Well, Webflow doesn't give me the ability to:
|
| 1. Change any of those variables (they're hardcoded text).
| The only templates you can use here are for collection items
| (ex: using the name of a blog post in the title). It doesn't
| give you any options for basic pages.
|
| 2. I can't change their order or anything about them at a
| higher level than on a per page basis.
|
| 3. And let's say for some dumb reason, 6 months down the line
| Google penalizes me for using "|" in the title, and now the
| convention is "-", I have to go into literally every single
| page and update it one by one.
| putrikarunia wrote:
| Ah really interesting, we haven't thought of this. We are
| building a CMS feature right now so probably similar to
| your first point, it could be possible by changing the CMS
| template.
|
| Have you had any solution that allows you to do this with
| other website builders?
| rchaud wrote:
| My experience is with WYSIWIG tools like Dreamweaver and more
| recently, Bootstrap Studio, which includes all the UI elements of
| the BS library. Those let you build standard websites where HTML
| and CSS are separated.
|
| What was the reason for going with React components? I thought
| those were for web apps with a lot of interactivity and changing
| states. I don't know much about React/Vue beyong the fact that
| they use a virtual DOM, so I'm curious.
| putrikarunia wrote:
| Oh hmm I'm not familiar with Bootstrap Studio, but from what
| you described, it's quite different because our users don't
| interact with the underlying HTML/CSS of their sites.
|
| We use React because our editor is built in React (which does
| have a lot of interactivity and changing states), and so, since
| it's a WYSIWYG editor, the user will be seeing how their site
| is rendered as they are editing it, so we render their site in
| React as well. Also, we are using this React framework,
| Next.JS, which have a functionality to generate static pages
| from our React component. At the end of the day the React does
| get compiled into static pages in HTML/JS/CSS. I'm not sure if
| this answers your question though, would be happy to answer
| more questions
| triumphantomato wrote:
| This is super cool work, congrats! I've been looking for a good
| low/no-code tool to build a static website to sell some assets
| I've developed, wondering if TypeDream can fit the bill.
|
| How easy is it to:
|
| + A/B test pages (e.g. for conversions)
|
| + Measure user interaction to understand incoming referral,
| bounce rate, time on page, user journey, etc.
|
| + Integrate with other automation tools like n8n.io
|
| I'm new to this so apologies if some of this is better served by
| other tools (suggestions welcome!).
|
| For example, in addition to the stuff above, i'd like to:
|
| + send transactional emails to customers who buy a product
|
| + send update emails to customers when the product gets an update
|
| + add orders to Airtable/Google Sheets to track sales (these
| could be handled with some automation integrations like n8n)
|
| On the site itself, is it possible to:
|
| + allow comments (simple way to do this might be to include a
| twitter post with the article URL, displaying the twitter replies
| as comments on the TypeDream website)
|
| Thanks and really cool work!
| putrikarunia wrote:
| Oh that's really cool. To answer your questions:
|
| - A/B testing: not supported yet, although we are thinking on
| building this. Would love to learn more from your use case! -
| Incoming referral, bounce rate, time on page are available
| through our built-in analytics. If you're familiar with
| Plausible https://plausible.io, we're using their self-hosted
| version to offer the analytics feature, so you should get
| everything they offer. - Not familiar with n8n.io, looks like
| it's similar to Zapier. We don't have any integration like this
| yet, but most functional components that you can add to your
| Typedream site (like forms, waitlist, etc) can be done using
| HTML embeds. For example, to add a form, you can embed an
| Airtable form in your Typedream site. This means that any
| automation supported by those tools can be used.
|
| With that said, interactions such as allowing customer to buy a
| product, sending emails, and adding orders to Airtable/Google
| Sheets can be done by using a third party service, like Stripe
| Payment Links to allow users to buy a product, then use
| Stripe's functionality or Zapier/n8n.io integrations to send
| emails or add orders to Airtable/Google Sheets. This is also
| the case with comments, for example you can embed
| https://commentbox.io/ into your Typedream site to enable
| comments.
|
| Hope this makes sense!
| triumphantomato wrote:
| thanks for the reply! will have to check out Stripe's
| email/orderflow integrations, didn't know about those :)
|
| does TypeDream support custom email domains? (example:
| myemail@mysite.com)
|
| re: A/B testing - my use-case is pretty simple. i have some
| assets i'd like to sell and want to A/B test what landing
| page converts the best (could also be useful to A/B test what
| landing page converts to the highest price/longest
| subscription if someone's selling subs).
|
| alternative use-case -- A/B test what article titles lead to
| the most search engine (or other inbound referral) traffic.
| let's say i have a set of content i've created, i'd like to
| have test same blog post with different article titles to
| know which one performs the best
|
| does that help?
| hyuuu wrote:
| the product looks very polished, congrats on the growth. As a
| fellow indonesian, It's nice to see more indo startups :)
| putrikarunia wrote:
| Thank you!
| Matthias1 wrote:
| I'm very impressed with what you've discussed here. I think
| there's a real market for no-code website builders that are user-
| friendly.
|
| How do you justify charging $144/year for a static site? Carrd.co
| offers similar features and charges $19/year for their Pro plan.
| Serving a static site is basically free. If your editor itself is
| that valuable, why not sell the editor as a software package and
| let me take my built site files and host them anywhere?
| rchaud wrote:
| Carrd has a major limitation: it is explicitly a "one-page
| site" builder.
|
| You cannot create multiple pages and link them together.
| Unsurprisingly, most Carrd websites I see are promotional of
| some kind, linking out to a bunch of third party sites, or
| Amazon affiliate links.
| putrikarunia wrote:
| Thank you! We're basing it off the price of other website
| builders. (For example, Webflow's Basic plan is $12 without
| their CMS feature). From what I know, Carrd only give you 1
| page per site. (We're also building our own CMS feature right
| now :D)
|
| And yes, it's the editor itself that is our biggest selling
| point, and we did have users who preferred to use the editor as
| a software, and then export the code and host them anywhere.
| Would love to get your thoughts on this approach! What kind of
| pricing model would work for you if we offer this as a software
| package?
| Gerardox wrote:
| Hi there! As I read this I wanted immediately to check it up
| and sign up right away since my ccard pro plan happens to
| expire tomorrow. Then the price... It would be great to get
| some kind of very basic plan. I really only need a single
| page but it was pretty ridiculous in the end to get my
| website to look ALMOST (I wasn't able to get it to do what I
| wanted and in the end I wondered if I could not have fought
| with the html/css myself (I don't do any of this anymore but
| used to)) like I wanted it to look. Ccars is 20 for a year. I
| would be willing to pay 3 times more, let's say. But 20/year
| vs 144/y is quite a difference :/ I will surely save this and
| pass it on though. Hell, even use it for my dad's website for
| example :) Cheers!
| putrikarunia wrote:
| Got it, thanks for the feedback. You could give it a try
| with the free plan which allows you to publish 1 page for
| free, but you won't be able to connect a custom domain
| unfortunately.
|
| I'm not sure if you're saying you want to add html/css or
| you don't, but just letting you know that we do have a Code
| Injection feature to add code to the <head> and <body>.
| monkeynotes wrote:
| $144/year sounds about right to me. A little higher than
| SquareSpace and being the new cat in town I'd suggest
| undercutting them to get traction, but overall I don't think
| it's far out.
| stevenicr wrote:
| "charging $144/year for a static site?" - thanks for posting
| this.
|
| I generally avoid software I can't buy and own, and with
| pricing like that it seems that are not trying to get pro /
| semi-pro site builders with this.
|
| With that price, I'd buy pinegrow and build lots of sites for
| about the same price. ( https://pinegrow.com/#buy )
|
| I guess this is more trying to carve a niche within the niche
| of wix/ squarespace / wordpress.com / google sites / godaddy
| sitemaker / every other cpanel host that has a builder, maybe
| webflow.
|
| With the title 'WYSIWYG website builder' I was really hoping
| for a netobjects fusion remake - but it seems it's another
| recurring billing saas trying to take market share from the
| others already trying to be microsoft frontpage for the web.
|
| I guess this includes hosting (from reading the comments) - so
| maybe it's more like a DO hosting with premium page builder for
| an extra few bucks a year kind of thing. There's nothing wrong
| with that, wish it was in the title.
| putrikarunia wrote:
| Thanks for the input, yes it's a recurring billing saas
| model, includes hosting, and the WYSIWYG is referring to a
| WYSIWYG rich text editor, like Medium, Notion, etc.
|
| Thanks for pointing out about Pinegrow as well, this is my
| first time hearing about it! We focus more towards non-pro
| users and trying to make the UX as familiar and simple as
| possible. Seems like Pinegrow is somewhat similar to Webflow
| and the pricing is more "per user" than per site.
|
| Is there any specific reason why you would like build lots of
| sites? We did encounter some requests on enabling code export
| and make a software package pricing so users can host the
| exported sites themselves, would love to understand your use
| case!
| splch wrote:
| I noticed there're some trackers in the pages. Is it possible to
| completely remove all tracking and make the site have better
| privacy?
| putrikarunia wrote:
| Yes it's possible. By default we include a Google Analytics tag
| on published sites, but you can contact us to disable it on
| your site.
| diskzero wrote:
| Your product looks nice! Just a suggestion about the
| tracking; disable all tracking by default and provide an easy
| to find option to enable Google Analytics, etc.
| putrikarunia wrote:
| Thank you, that makes sense! We actually just released a
| built-in analytics feature a couple weeks ago
| bko wrote:
| The page built from the demo (https://typedream.com/cardy) just
| spins... It would be cool if I could see the final result of the
| demo.
| putrikarunia wrote:
| Oh where did you find this link? This looks like a broken link
| that leads nowhere, we should update that. You can check out
| the showcase here https://typedream.com/showcase
| codebeaker wrote:
| >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.
|
| Why not make a DOM Editor then with virtual components? The
| JSON<>React serialization doesn't seem to offer much value,
| unless it's purely mechanical.
|
| I don't mean to detract from the praise your product is getting
| here, but I'm really curious about those motivations if you have
| time to answer my query in amongst the other more excited
| threads, I'd be glad to understand what the trade-off buys you?
| nawgz wrote:
| > The JSON<>React serialization doesn't seem to offer much
| value
|
| I mean, you don't see any value in being able to declaratively
| state an entire app? ...
| putrikarunia wrote:
| I'm not sure I can visualize what you mean by a DOM Editor,
| would love it if you can expand on that.
|
| The JSON format allows us to only specify the main type/value
| of each block, while giving full flexibility on how to render
| them. I think there are several approaches to rich text editing
| out there, we picked this one because it seemed to be the most
| flexible and portable, as we need to invent our own types of
| standard "blocks", like columns, containers, etc.
|
| Not sure if this answers your question though, happy to go
| deeper if you have more thoughts on it.
| what_is_orcas wrote:
| Wow, I built a prototype of something almost exactly like at my
| last job. It didn't go anywhere after that for a variety of
| reasons, but I remember asking myself "I wonder if this sort of
| thing would be worth releasing/open-sourcing?" Looks like I won't
| have to wonder forever, I can just watch y'all and find out.
| putrikarunia wrote:
| Oh interesting, what sort of issues did you face? Perhaps we
| could learn from your experience!
| bingohbangoh wrote:
| This is really impressive.
|
| It seems like Medium kicked off this block interface and I'm a
| big fan of the design trend. It's great for power users while not
| being too intimidating.
| putrikarunia wrote:
| Yes exactly! We had a great time using Medium, Ghost, and
| Notion, and thought this approach is quite easy and familiar
| for most people
| kevsim wrote:
| Looks very cool! Did you base it on an opensource editor or did
| you build it from scratch?
|
| Asking because my startup has invested a lot into building our
| editor with SlateJS, so I'm always curious what other teams
| settle on.
| putrikarunia wrote:
| Oh we use SlateJS as well! Mind sharing your experience with
| it?
| mwcampbell wrote:
| Congrats on the launch. Have you taken any steps to make it easy
| for your customers to make their websites fully accessible,
| including for blind users? For example, making sure they put alt
| text on images, adding a "main" landmark at the start of the main
| content, encouraging semantic markup such as headings...
| putrikarunia wrote:
| We just added the feature to add alt text on images, and we do
| adopt the markup syntax such that bigger texts are available
| using headings 1, 2, and 3. But there's definitely a lot more
| for us to learn and implement on this.
| evangow wrote:
| I'm curious as to how you all are providing SSL for custom
| domains
| putrikarunia wrote:
| The sites are deployed on Vercel and Digital Ocean. Both
| platforms allow users to connect their custom domains, and they
| auto-generate the SSL for these domains.
| evangow wrote:
| Gotcha. That makes sense since each site is deployed
| separately and not a subdomain of a single deploy. Thanks for
| sharing!
| yuters wrote:
| Whenever I test out a new website builder, the first basic thing
| I try to do is change the entire background color to some ugly
| color.
|
| Here's how that went:
|
| - Right clicking on the page outside the boxes, ok no special
| contextual menu
|
| - Went into the page settings (three dot menu) and try to find
| the option there
|
| - Tried to create a new block, saw "container" and see that I can
| add a background color and resize it to full width. That's not
| exactly what I want but it's close enough
|
| - Get rid of all the other blocks except container, now the
| second contextual menu to resize it is hidden at the top outside
| the viewport.
|
| - Create a navbar just to add a little space and be able to click
| it :)
|
| - Resize the box and add the background color (unfortunately for
| me, I can only choose presets of non-ugly colors)
|
| Besides this, I really like how if you already use notion you'll
| feel right at home. :)
|
| Edit: Just saw the "custom color" box at the end there. My bad.
| putrikarunia wrote:
| Yes we actually did have a couple questions on how to change
| the background color, and realized that using a container is
| "doable" but "not intuitive", so definitely something we should
| improve on!
|
| And yes the context menu is covered when it's near the top , a
| bug we need to fix.
|
| About the color, I am not sure whether you want the ugly color
| or you don't lol, but you seem to have figured it out :D
|
| Thanks for the feedback!
___________________________________________________________________
(page generated 2021-11-02 23:00 UTC)