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.

In this article, I’m going to analyze Carrd.co, a service for building responsive one-page sites, break it down into components to briefly see how a similar product can be built.

The Output

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

  • Personal sites
From Carrd.co
  • Landing pages
From Carrd.co

(See in detail at carrd.co/build)

Essentially, the output you can get from Carrd is simple yet beautiful and responsive personal sites and landing pages.

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).

For Carrd, there’re 4 primary concepts:

  • Site: deployment configuration of a site such as title, description, language, domain, SSL certificates, Google analytics, etc. In software engineering, a Site is basically a configuration file for DevOps automation.
From Carrd.co
  • Background: each Site has a Background component, which sits behind all of a site’s elements. When rendering on browsers, Background is technically a mapping to CSS background property of HTML body, which can be styled to show either a solid color, a gradient, an image, or a video.
From Carrd.co
  • Page: the container of all of a site’s elements (except for Background). A Page defines how a site’s overall layout looks, how elements should be aligned with each other. A Page can also be styled and positioned to show like a card or a window. When rendering on browsers, Page is technically a top-level div.
From Carrd.co
  • Element: a widget on a Page such as Text, Image, Button, etc. Carrd has about 18 different types of elements. Each element has several properties that can be configured to change its behavior and look-and-feel. When rendering on browsers, each element is technically a mapping to a set of HTML elements and CSS styles.

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.

Yeah, that’s exactly it. However, to make it a full-blown product for non-developer users, we’ll need a couple of other components. In a word, we’ll need:

  • Components Library and Compiler: together define what elements are available for uses, how they are compiled into HTML/CSS/JS (or other presentations if you’re building for platforms other than web).
  • 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 𝐩𝐡𝐮𝐜𝐭𝐦𝟗𝟕.𝐜𝐨𝐦

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

6. Vue Components

ReactJS for beginners

Handle Recursive Inner Child Elements in Angular

🎯USE-CASE OF JAVASCRIPT IN INDUSTRY

Guide to the Express Router Object — Request and Parameter Handling

Introduction to JavaScript Data Types

How to create multiple pages in your React app

Building a Super Commuter Weather App for CLI

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Minh-Phuc Tran

Minh-Phuc Tran

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

More from Medium

TCP and TLS handshake: What happens from typing in a URL to displaying a website? (Part 2)

Make Your GitHub Profile Stand Out To Attract Better Opportunities

7 Best Websites for Competitive Programming in 2022

7 best websites for competitive programming in 2022

GitHub for Beginners