Today, I'm happy to announce Hunch, a "collaborative" website builder I've been working on for the past 12 months. It's still under heavy development, but already quite usable. Actually, this blog you're reading and the landing page of hunch.cloud are built on Hunch itself. In this post, I will write about why I'm building Hunch and how Hunch can help you build website faster.

Why website builder

Previously, if I'm asked to build a new landing page or campaign page, I will probably open a text editor and type Hello world, save it as index.html, open it in a web browser, then setup live reloading and start actually building the page. After the page is finished, I will need a way to show it to my colleagues (designer or boss). Then, I need to find a way to deploy it, and decide which CDN to use. I also need to setup https and prevent SSL certificate expiration.

Another case, someone find a typo on the landing page and asked me to fix it. I open my text editor and fix the typo, send a pull request to GitHub, wait for my colleague to review. After my PR merged, CI runs the full test suite then start deploying. After about an hour, the typo is finally fixed.

Some of these sound familiar to you? A website builder can help. The basic goal of a website builder usually includes edit the website directly, deploy faster, shorter feedback loop, less things to worry about.

Why another website builder

Hunch supports CSS directly instead of inventing new ways to style elements. If you know some CSS and have used browser devtools to adjust element styles, Hunch should feel similar.

The process of building a website on Hunch looks like this:

  1. Drag/drop some div, img, TextBlock to the element tree or the page itself
  2. Put some CSS into the Styles panel on the right-hand side
  3. When you're happy with the page, click the Publish button
  4. Share the link to the Internet

It's much faster and easier to understand by using CSS. The interoperability with your existing CSS code base is great. You can copy/paste CSS declarations from/to the Styles pane, with a Paid plan, you can even import a whole CSS file.

One of the most distinguishing feature of Hunch is collaborative editing. You can invite people to collaborate with you on Hunch. Collaborators can edit the same page at the same time with you, and see the changes in real time.

How "collaborative"

You might have noticed the word collaborative was quoted in the title, that's because I cheated, sorry. It's not real collaborative editing yet. There is no conflict resolution, we use the most naive approach, the last edit always wins. This may sounds very bad, but since every change is synced to all collaborators in real time, it's still much better than nothing. If something unexpected happened, don't panic, use the undo button for rescue.

A use case I find this feature useful even as a solo developer. I sometimes open a small new browser window for previewing purpose only. So when I change some styles for a larger screen, I will notice if it breaks styles for a smaller screen.
two-tabs

In the future, we may want to implement something similar to the Figma multiplayer technology. I will collect feedback on this and keep improving.

A little about myself

I came to Japan in the summer of 2017, being tired of office work and wanting to use Haskell and PureScript to build something real, I quit my job and started Nonbili Inc. later that year. As a foreigner here, I have to keep the balance of my company to secure my visa. That's why I'm doing consulting jobs and developing Hunch at the same time. I hope I can afford a designer to polish the UI of Hunch, and hope Hunch can grow to a project that I can work on full time.

If you like the product idea, give it a try. Unlock all the features by upgrading to a paid plan. Send me any feedback, bug reports, feature requests. As a solo developer, your support means everything to me.

Thank you for reading.