Free Site Builder built with VanillaJS

Hello Coders!

This article presents Simpllo, an Open-Source Site Builder that allows anyone to design, download, and deploy websites for free. This service can be used without an account and the number of projects that a user can create is unlimited.

👉 Simpllo Website Builder - Source Code (saved on GitHub)

The product was built in just a week and the story behind it might interest some of you. The current features are listed below:

• Vanilla JS Core, No backend
• Remote Components pulled from a distant server
• Global Assets: CSS, JS (injected in all pages)
• PAGE Settings: SEO, External JS & CSS
• Components Customization
  • CSS, Classes
• Grid layout
• Multi-page Support
• Preview (multi-device)
• Download (ZIP)
• Deploy on Netlify

After a few attempts of coding the builder using React, React-DND, Craft.js and other popular libraries related to this DnD concept we decided to fall back to a VanillaJS core built from scratch. Some will say that is a mistake and this might be just another project that reinvents the wheel. Well, here are the reasons for this decision:

✅ #1 - We needed a codebase where we have 100% control

Using an external library, if you hit a bug, might be hard to get support or find an workaround

✅ #2 - Export option with clean HTML

React-DND is able to export the pages but the HTML code looks not so nice.

✅ #3 - Using Distant Components

This requirement was probably the most important show stopper regarding React-DND, and Craft.js. Usually, all existing builders embed the components INSIDE and moreover, all needs to be translated to React.

In our simple builder, this case is solved by pulling the components from a distant server at runtime, making the builder decoupled from the components design.

The mechanism is to query the components server and pull all the meta data in a single request. Components are translated by the server into Base64 hashes and the UI knows how to decode them and build the Sidebar Dynamically:

For instance, the BS5 Kit sent by the Components Server looks like this:

{
    "name": "BS5",
    "version": "1.0.0",
    "type": "kit",
    "description": "BS5 BASIC",
    "demo": "https://django-pixel-lite.appseed-srv1.com/",
    "content": {
        "layouts": {
            "base.html": "BASE64"
        },
        "components": {
            "Grid": { 
                "grid-2rows.html": "PGRpdiBpZD0iZHJhZ2dhYmxlLWdyaWQtMSIgY2xhc3M9ImRyYWdnYWJsZSIgZHJhZ2dhYmxlPSJ0cnVlIiBkYXRhLXR5cGU9ImdyaWQtMmNvbCIgZGF0YS1pbmZvPSJHUklEIC0gMiBST1dTIENvbXBvbmVudCI+CiAgICA8ZGl2IGNsYXNzPSJyb3ciPgogICAgICAgIDxkaXYgaWQ9ImdyaWQtMmNvbC0xIiBjbGFzcz0iY29sIGRyb3B6b25lLWVsZW0gaW5uQ29sIG14LTEiPjUwJTwvZGl2PgogICAgICAgIDxkaXYgaWQ9ImdyaWQtMmNvbC0yIiBjbGFzcz0iY29sIGRyb3B6b25lLWVsZW0gaW5uQ29sIG14LTEiPjUwJTwvZGl2PgogICAgPC9kaXY+CjwvZGl2Pg==",
                "grid-3rows.html": "PGRpdiBpZD0iZHJhZ2dhYmxlLWdyaWQtMiIgY2xhc3M9ImRyYWdnYWJsZSIgZHJhZ2dhYmxlPSJ0cnVlIiBkYXRhLXR5cGU9ImdyaWQtM2NvbCIgZGF0YS1pbmZvPSJHUklEIC0gMyBST1dTIENvbXBvbmVudCI+CiAgICA8ZGl2IGNsYXNzPSJyb3ciPgogICAgICAgIDxkaXYgaWQ9ImdyaWQtM2NvbC0xIiBjbGFzcz0iY29sIGRyb3B6b25lLWVsZW0gaW5uQ29sIG14LTEiPjMzJTwvZGl2PgogICAgICAgIDxkaXYgaWQ9ImdyaWQtM2NvbC0yIiBjbGFzcz0iY29sIGRyb3B6b25lLWVsZW0gaW5uQ29sIG14LTEiPjMzJTwvZGl2PgogICAgICAgIDxkaXYgaWQ9ImdyaWQtM2NvbC0zIiBjbGFzcz0iY29sIGRyb3B6b25lLWVsZW0gaW5uQ29sIG14LTEiPjMzJTwvZGl2PgogICAgPC9kaXY+CjwvZGl2Pg==",

...TRUNCATED...

Based on this, the Builder generates the visual components that the user is able to drag & drop.

This pattern makes the builder compatible with any components library built with Tailwind, Pico CSS, etc, and we think might be useful because simply reuse existing components.

✅ #4 - Embeddable in other products

The builder, being decoupled from the design, can be bundled as an NPM package and later, used in any product that needs Drag & Drop capabilities.

The next version of the product will include this feature and each product that implements the API interface expected by the Builder can build visually the UI.

The features provided in the latest version are highlighted in this video presentation published on YouTube:

👉 Free Site Builder - Create Site & Deploy - Video Presentation

If this open-source product got your attention, feel free to access the official repository, start the product locally and contribute.

The next Steps

Improve, codebase refactoring, add more components, frameworks and invite opensource contributors for accelerated development.

Thank you in advance for you feedback! I'll save below some related links and resources:

• 👉 Simpllo Builder - Live DEMO
• 🚀 Get Support provided by AppSeed