DEV Community

Cover image for Open-Source & FREE Site Builder | Simpllo

Open-Source & FREE Site Builder | Simpllo

Sm0ke on July 23, 2023

Hello Coders! This article presents Simpllo, an Open-Source Site Builder that allows anyone to design, download, and deploy websites for free. Th...
Collapse
 
efpage profile image
Eckehard

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

Collapse
 
sm0ke profile image
Sm0ke

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

Collapse
 
efpage profile image
Eckehard

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.

Thread Thread
 
sm0ke profile image
Sm0ke

Sounds good. Huge ty for the time and suggestion Eckehard.

Thread Thread
 
efpage profile image
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!

Thread Thread
 
sm0ke profile image
Sm0ke

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.

🚀🚀

Thread Thread
 
efpage profile image
Eckehard

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!

Thread Thread
 
sm0ke profile image
Sm0ke

Ty, We will take into account this pattern.

Currently, we are using something super simple:

  • components are not preprocessed
    • the users can define new components
  • onMouseOver even, an unique UUID is injected in the current element
    • this is applied on all elements: div, a, p, img .. etc
  • Once we have the ID, the element props are editable in the PROPS panel without comparing the element with a template

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.

Collapse
 
mardeg profile image
Mardeg

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

Collapse
 
sm0ke profile image
Sm0ke

Hello @mardeg

Yep, for sure once the basic features are covered, we will provide more options regarding SEO. This includes:

  • Content text/links ratio
  • Suggestions on the layout (during the edits)
  • pre-build templates that implement best practices & a nice design

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!

Collapse
 
timoye profile image
Timothy Soladoye

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

Collapse
 
sm0ke profile image
Sm0ke

Ty Timothy!
Your suggestion is noted. Great Idea.

Collapse
 
psypher1 profile image
James 'Dante' Midzi

I 100% agree with the decision to use vanilla js.

Also, nice project!

Collapse
 
sm0ke profile image
Sm0ke

Ty James

Collapse
 
crearesite profile image
WebsiteMarket

Nice pattern

Collapse
 
sm0ke profile image
Sm0ke

Thank you

Collapse
 
catsarebetter profile image
Hide Shidara

I think this is great, we're probably due for another wave of site builders!

Collapse
 
sm0ke profile image
Sm0ke

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!

Collapse
 
windyaaa profile image
Windya Madhushani

Nice project.

Collapse
 
sm0ke profile image
Sm0ke

Ty Windya.
In case you have the time, feel free to contribute to enhance it.

Collapse
 
mezieb profile image
Okoro chimezie bright

Thank you for inpute

Collapse
 
sm0ke profile image
Sm0ke

Ty Okoro.

Collapse
 
ashutoshmishra profile image
Ashutosh Mishra

Just tried it! Works really well.

What's your future plan with this project?

Collapse
 
sm0ke profile image
Sm0ke • Edited

Hello Mishra!

We have some big plans with it. Here is the ROADMAP:

  • ✅ Release it as an NPM package (for distribution)
    • this will make the builder available in any product
  • ✅ Integrate more Kits (AdminLTE, .. etc) and frameworks Tailwind, PICO.css .. etc.
  • ✅ Allow user to create and upload their own components
    • this is not supported by any builder ont he market (from what we know)
  • ✅ Add Active Components like charts, dataTables
    • connected to real data

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.

Collapse
 
jlopez788 profile image
Juan Lopez

Niiiice. I've been. Wanting to do something like this in blazor, just a fun project

Collapse
 
sm0ke profile image
Sm0ke

Ty Juan! You can contribute to this one.
Effort is paid.

Collapse
 
2016lisali profile image
Lisa Li

Thanks for sharing

Collapse
 
sm0ke profile image
Sm0ke

Yw Lisa :)