app-generator/free-components-builder

Free Components Builder - Open-Source Tool | Simpllo

Components Builder by Simpllo

Code and design components for Bootstrap, Tailwind, PICO.css - Free tool actively supported by AppSeed.

STATUS: Work in Progress

Roadmap

Status	Item	info
❌	Core	Vanilla JS
❌	Persistence	Local Storage
❌	Components	Bootstrap 5
❌	Components	Tailwind
❌	Components	Bulma
❌	Components	PICO.css
❌	Edits	Styling
❌	Edits	Fonts
❌	Edits	Icons
❌	Edits	Images (remote)

License EULA

For more information, contact AppSeed [email protected].

---

Free Components Builder by Simpllo - Free tool actively supported by AppSeed.

free-components-builder's Issues

[Feature #2] Persistence Per Framework

The user can save & restore the components for each framework

• Bootstrap 5
• Tailwind
• Bulma
• PICO.css

If the is not providing a name, a default one is generated using the convention:

• <NEW_ID>
  • Samples: bootstrap5, bulma3 .. etc

Use-Cases

• The Switcher for each framework shows the number of components that each framework has.
• The default framework is Bootstrap and the user can restore a previously edited component.
• The current component is automatically saved
  • if the user hits F5 (reload), the current state of the page needs to be restored
• When an old component is restored the use can apply the changes, and preview the component

[Feature #4] Component Elements Props

The inner components can be fully customized via:

• CSS
• change the size of an element using the mouse
• images
• icons
• images (URLs)
• change background
  • colors
  • images
  • video

The edits inside the components need to provide a no-limit customization.

[Feature #3] Component Edits

The component code needs to start as an empty DIV that fills the 100% parent (width and height.

The editor allows:

• edit visually the component
• edit HTML code
• edit CSS
• edit JS

The update in all the above containers is reflected automatically in the preview.

[Feature #5] Component Preview

The current state of the component can be previewed using a multi-device view just like the one provided by

https://www.simpllo.com/

[Feature #1] CSS Framework Switch

The editor needs to provide a way to switch dynamically the CSS frameworks

• Bootstrap 5
• Tailwind
• Bulma
• PICO.css

The related assets for each framework need to use CDN versions (CSS, JS).