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.
👉 Free Site 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:
- CORE Builder Shipped via CDN, NPM
- Simpllo - How to use it in your Website (for free)
-
Vanilla JSCore, 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:
If this open-source product got your attention, feel free to access the official repository, compile 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 - 👉 Free Site Builder -
Documentation
Top comments (28)
Hy Adrian,
Great project! Do you think, this concept coud be extended to work with a pure JS-framework like VanJS? This could be a large step forward, as VanJS currently has no boilerplate (and does not deserve much).
Hello Eckehard,
I will check the library. As we speak, we are looking for solutions to refactor the codebase and use something that speed up the process in the long run.
Your suggestion is noted here:
github.com/app-generator/rocket-bu...
TY
As the HTML-DOM-Api ist pretty uniform today, we see some movement to reduce the complexity of the whole build process. Svelte is a huge step in this direction, but libraries like VanJS or DML go a step further and make just better use of vanilla JS. At least what we can see from the first applications created on this plaforms, this servers well - at least for smaller applications. So, maybe this is in line with your decision to go back to vanilla.
In VanJS, all tag functions are just generating standard DOM elements, so you can reverse the process and generate tag functions from HTML. Maybe this aligns well with your approach.
Sounds good. Huge ty for the time and suggestion
Eckehard.Never mind, this would pay thousand times back if there was some kind of drag-and-drop interface for interactive website programming.
You approach reminds me a bit on the Borland-IDE, which allowed to generate page layouts per drag&drop, but did not limit the use of any code you liked. Would love to see more of this!
Borland-IDE, I remember.
It was really cool.
We will see how it goes, Thank you for the supportive tone.
The hard part might come when active components like Charts, APIs, dataTables, and Medium-like Editors will be integrated.
Programming is fun, DnD is fun, and this hybrid pattern where the code is partially generated and partially manually coded fits nicely.
🚀🚀
The hard part is to find a future proof concept, that does not limit the programmer.
The Borland IDE had so called "property managers" for all components. For the standard GDI elements, this was all more or less all the same, some generic stuff that derived the properties from the components. And for the more advanced classes, you could provide your own porperty managers, that where installed together with the component.
Maybe you can think about a similar approach. Using VanJS or DML makes it increadibly simple to provide such tools. Look for the "clock" example, that was provided here. It was just a breze to build a fully encapuslated element that can be installed as a web-component, see the example here.
Happy coding!
Ty, We will take into account this pattern.
Currently, we are using something super simple:
This simple pattern make any element editable (all attributes) without preprocessing or compare with templates.
At some point, we might hit the wall and fallback to another pattern (might be the one suggested by you, or another one) .. but we will see.
Ty for the on-going chat.
Are you planning to add Rich Results to the SEO section, like for example setting a "How to" mode for someone authoring a tutorial so the drag-drop elements contain attributes that conform to that particular (RDFa Lite) schema?
Validation example: search.google.com/test/rich-result...
Hello @mardeg
Yep, for sure once the basic features are covered, we will provide more options regarding SEO. This includes:
And other things suggested by the community, once we have a feedback knowledge base to operate.
For now, we try to make it distributable (NPM package) and improve the KITS managed by the tool.
Thank you for the suggestions & time!
Nice project!
You can add templates to start a build from. This will give users ideas on what is possible. Say like a boilerplate.
Something similar to what carrd.co/build provides
Ty Timothy!
Your suggestion is noted. Great Idea.
I 100% agree with the decision to use vanilla js.
Also, nice project!
Ty James
Nice pattern
Thank you
I think this is great, we're probably due for another wave of site builders!
Ty @catsarebetter
We try to make it distributable and allows anyone to benefit from it without a hard coded KIT.
This might be useful for a school, for instance, to incorporate the builder into their existing website and update much faster the site.
We will see.
Thanks again for the feedback & time!
Nice project.
Ty Windya.
In case you have the time, feel free to contribute to enhance it.
Thank you for inpute
Ty Okoro.
Just tried it! Works really well.
What's your future plan with this project?
Hello Mishra!
We have some big plans with it. Here is the ROADMAP:
Basically, we want to provide a hybrid generator that allows to build a product and later update manually the code, and this is the first step.
We will see how it goes, but this is the BIG picture.
Ty for noticing the tool.
Niiiice. I've been. Wanting to do something like this in blazor, just a fun project
Ty Juan! You can contribute to this one.
Effort is paid.
Thanks for sharing
Yw Lisa :)