Reverse-engineer A No-code Website Builder

What and why?

No-code is becoming a big part of modern product development, it encourages an agile approach and accelerates iterations. Understanding how a no-code tool is built can be an advantage for a developer.

The Output

First, let’s look at what can be made using Carrd.

From Carrd.co
From Carrd.co

Design Concept

Every no-code builder has a design concept, which is basically how its outputs are structured so that they can be built, serialized (saved to disk), and reproduced (rendered on screen).

From Carrd.co
From Carrd.co
From Carrd.co

Implementation Components

If you’ve experienced enough with a component-based front-end framework (React, Vue, etc), you may already recognized that Carrd is essentially a components library and a builder UI tailor-made for it.

  • Builder: a graphical user interface application that allows users to pull elements together visually, instead of writing code.
  • Serializer: a service that writes what users built visually with Builder into disks (database, text files, etc) and vice versa.
  • Publisher: a service that publishes a site’s output along with its configurations to a hosting or distribution channel (Amazon S3, Vercel, etc).
  • Dashboard: the UI for managing one’s account, sites, and stuff other than building.
  • Homepage: the website itself, including its logo, landing page, signup page, etc.

Software Engineer. Documenting my journey at 𝐩𝐡𝐮𝐜𝐭𝐦𝟗𝟕.𝐜𝐨𝐦