app-generator / free-site-builder

Free Site Builder - Open-Source Tool | Simpllo

Free Site Builder Simpllo

Free & Open-Source Site Builder that uses Vanilla JS and a Remote Server for components injection - Actively supported by AppSeed.

• 👉 Free Site Builder - Live DEMO (BS5)
  • ✅ Pixel BS5 - demo
  • ✅ Volt BS5 - demo
• 👉 Free Site Builder - Documentation
• 🚀 Join the Community - Discord

Roadmap & SPECS

Status	Item	info
✅	Core	Vanilla JS
✅	Components/KIT	Bootstrap 5
✅	Components/KIT	Pixel BS5
✅	Components/KIT	Volt BS5
✅	Components/KIT	Bootstrap 5
✅	Remote Components Server	https://components-server.onrender.com/kits/bs5/
✅	Persistence (local storage)	Save, Restore, Clear
✅	One-Page Layout	Single Component Drag & Drop
✅	Component Customization	Text-Only
✅	Grid Components	This allows to inject predefined rows (2,3,4 columns)
✅	USE Remote Components	Yes
✅	Component Customization	Texts, Links
✅	Component Customization	Images
✅	Component Styling	CSS, Classes
✅	PAGE Customization	CSS
✅	PAGE Customization	JS
✅	Manage SEO	Title, Description, Keywords
✅	Handle Multiple Pages	YES

Compile the Builder

Tested with Node 16.x, 18.x.

$ git clone https://github.com/app-generator/free-site-builder.git
$ yarn
$ yarn dev # development (LIVE Reload)

Components Server (distant)

Managed by Flask (optional). By default, a LIVE Components Server is used.

$ cd free-site-builder/backend
$
$ virtualenv env
$ # Or
$ python -m venv env 
$
$ source env/bin/activate  # Linux
$ # Or
$ .\env\Scripts\activate   # Windows
$
$ pip install -r requirements.txt
$ flask run --debug

Here is the output:

• http://localhost:5000/
• http://localhost:5000/kits/, returns available KITS
  • 'material-kit'
  • 'kit2'
• http://localhost:5000/kits/material-kit/, return Material Kit assets

{
    "name": "Material Kit BS5 ",
    "version": "0.0.0",
    "type": "kit",
    "material-kit": {
        "layouts": "base.html",
        "components": {
            "footers": {
                "footer.html": "NA"
            },
            "headers": {
                "header.html": "NA"
            },
            "navigation": {
                "navigation.html": "NA"
            },
            "general": {
                "section1.html": "NA"
            }
        }
    }
}

Add new component

• Navigate to backend/apps/templates/bs5/components
• create the component like footer.html
• Edit the file and add the HTML code
• Compute the Base64 hash using service:
  • https://www.base64encode.org/
• Update info.json and add the new component using existing category or a new one
  • Syntax:

... (truncated) ...
        "components": {
            "footer": {
                "footer.html": "BASE64_Hash HERE"
            }, 
        }   
... (truncated) ...         

NOTE: The UI Builder uses the local storage to cache the info.json pulled from the server.

In order to have the latest version, please open an incognito window or clean manually the data from the local storage.

License EULA

For more information, contact AppSeed [email protected].

---

Free Site Builder - Provided by AppSeed.

free-site-builder's Issues

[ℹ️DEBATE] The NEW Codebase

A new, improved structure needs to be provided

SPECS: https://docs.google.com/document/d/1YbmZro0b8ucMGE227xSMzcQGNbWgTaiOKfjgEW9RsWE/edit

TBD

[✅ASSIGNED] Component PROPS - Images URL

STATUS: ASSIGNED to @topstar210 , Budget $50 (paid via UpWork)

NOTE Feature Depends on #18 (Redux Integration & Refactoring)

---

Context

In the current version, the PROPS available for the current element are:

• text
• URLs

The new evolution should empower the user to update the IMG.src property via an external LINK.

For now, image uploads are not supported.

Grid Component is Passive

The goal for the grid component is to allow nice formatting of the UI.

To achieve this goal, the grid cells should accept components just like in this DEMO:

@MohammadMargub please take a look.
TY!

[✅ASSIGNED] Backend - Generated JSON for a specific KIT

STATUS: ASSIGNED to @mominur-helios

---

Context

In the current version, the JSON associated with each KIT is manually processed (structure, and base64 conversion).

In order to speed up the process, we need a script that will be executed at the root of the project and will generate the associated JSON:

Syntax:

generate-kit-json <KIT_NAME>

• This should parse the contents of backend/apps/templates/pixel
• Generate this file: backend/apps/templates/pixel/info.json

@mominur-helios please take a look and proceed.

TY!

[ℹ️DEBATE] Refactoring using VanJS

As suggested on DEV an alternative to plain VannilaJS mi be VanJS:

https://vanjs.org/

@TBD

VOLT Branch Issues

Hello @ravirasadiya please pull the latest version of kit-volt branch and take a look at the following issues:

• modal not working on click
• if possible, adjust the sidebar high to be the same as the main builder DropZone
  • when empty, need to be at a minimum of 500px.
• profile -> card.html
• needs to have centered content

In the rest, all is good.

TY!

[✅ASSIGNED] Builder InitParams: API_URL and UI Kit

STATUS: ASSIGNED to @umarali

---

Context

In the current version, the URL of the backend and the UI Kit are both hardcoded.
The DNDBuilder.setup() helper needs to be updated to allow the injection of the mentioned variable at runtime:

  <script type="module">
    import { DNDBuilder } from "./index";

    DNDBuilder.setup(BACKEND_URL='https://components-server.onrender.com/', UI_KIT='bs5');
    // Defaults:
    // BACKEND_URL=https://components-server.onrender.com/
    // UI_KIT=bs5
    DNDBuilder.render();
  </script>

The above variables are used to query the backend server, currently managed via ENV.

https://github.com/app-generator/free-site-builder/blob/main/src/main.ts

const BACKEND_URL = "https://components-server.onrender.com/";
const url = import.meta.env.VITE_BACKEND_URL
  ? import.meta.env.VITE_BACKEND_URL
  : BACKEND_URL;

const UI_KIT = "bs5";
const ui_kit = import.meta.env.VITE_UI_KIT
  ? import.meta.env.VITE_UI_KIT
  : UI_KIT;

@umarali please take a look.

TY!

[✅ASSIGNED] UI Improvements

STATUS: ASSIGNED to @ravirasadiya

---

UI Enhancements

@todo

[👉UNASSIGNED] Component Styling - Classes, Custom CSS

STATUS: UNASSIGNED, Budget $100 (paid via UpWork)

NOTE Feature Depends on #18 (Redux Integration & Refactoring)

---

Context

In the current version, the PROPS available for the current element are:

• text
• URLs

The new evolution should empower the user to update the active element via:

• custom CSS
• Add / Remove CSS classes

The classes are presented to the user as navPills and the changes will be automatically reflected on the target component.

Layout Refactoring - As per SPECS

As mentioned in the SPECS the layout needs to be:

• LEFT, reserved for components
• MIDDLE -> builder
• RIGHT for props & pages management

In the latest version, the components are positioned on the RIGHT.

@MohammadMargub please take a look.
TY!

[✅ASSIGNED] Preview is Kit Dependent

STATUS: ASSIGNED to @umarali

---

Context

The Preview feature is UI KIT dependent. In other words, the preview looks good for BS5 and bad for Pixel.

To check this, open the standalone versions:

• index-cdn.html that uses BS5
• index-pixel.html

@umarali please take a look.

NOTE: the fix for the PIXEL was provided in this commit:

7bf7ef9

TY!

[IMPORTANT] Backend - Components are hardcoded in the builder

As mentioned in the SPECS the builder needs to pull the UI Kits & Components from the Backend.

NOTE: This pattern is significant for the usability of the Builder.

---

Once started, the user can:

• The BUILDER Loads from the env the address of the Backend Server
  • Variable name: BACKEND_COMPONENTS_SERVER
    • Default value: http://localhost:5000
• The BUILDER pulls all designs name available from the Backend Server
• The user sees in the navigation bar a combo with all the kits
• Once selected a design, the combo becomes read-only
  • select a design (only once) in the navigation bar
• the name on the selected design remains in the navigation bar
• The Components for the selected design are pulled from the backend
• the LEFT panel is populated with the components
• The user can build and manage pages.

In the current version, the components are hardcoded in the builder.

@MohammadMargub please take a look.

TY!

[✅ASSIGNED] Various UI/UX Improvements Needed

STATUS: ASSIGNED to @umarali

---

Context

Several issues that need to be addressed to improve the user interface and experience:

• Flickering: UI elements flicker on hover.
• Linking: No functionality to link pages.
• Modal: Confirmation modal has uneven button sizes.
• CSS: Global CSS affects outside canvas.
• Preview: Alignment in card component not respected in preview mode.

LEFT Sidebar - Needs to use SERVER components

The current version uses the sidebar:

• three local components
  • a simple DIV
  • two GRIDS
• a remote component

Regarding this, the UI needs to pull the components from the backend using bs5 node. Here is the flow:

• Fetch the URL https://components-server.onrender.com/kits/bs5/
• Parse the components node and build on the sidebar a dynamic collapsable menu that mirrors the response from the server:

For instance, the server responds with this:

{
    "name": "BS5",
    "version": "1.0.0",
    "type": "kit",
    "description": "BS5 BASIC",
    "demo": "https://django-pixel-lite.appseed-srv1.com/",
    "content": {
        "layouts": {
            "base.html": "BASE_64"
        },
        "components": {
            "grid": {
                "grid-2rows.html": "BASE_64",
                "grid-3rows.html": "BASE_64",
                "grid-4rows.html": "BASE_64"
            },
            "footers": {
                "footer.html": "BASE_64"
            },
            "general": {
                "div.html": "BASE_64"
            }
        }
    }
}

Based on the information, the generated menu needs to be:

• Grids (collapsible)
  • grid-2rows
  • grid-3rows
  • grid-4rows
• Footers (collapsible)
  • footer
• General (collapsible)
  • div

Like this, the sidebar is populated automatically using these rules:

• Grids are always at the top
• Node Name is the UCfirst helper applied on the JSON node:
  • (JSON) footers -> (Menu Item) Footers

Other aspects:

• During the load, the user is informed that the components are loaded from the server using an overlay in the sidebar with a message.
  • Once the response is done and components are extracted, the sidebar is populated
• The JSON response is saved in the local_storage in the browser to avoid another server call if the user accidentally hit F5.
• The code HTML code for each component comes as a BASE_64 hash in the corresponding field.
• This is needed because we can get from the server all the designs in a single request (JSON Format).

@MohammadMargub please take a look and proceed with the code.
TY!

GRID Tab - Needs to be incorporated in Components

A grid component is just another kind of component and needs to be in the Components set, at the first position:

@MohammadMargub please take a look.
TY!

[✅ASSIGNED] Index-CDN - Empty Sidebar when using Builder v1.0.13 and above

STATUS: ASSIGNED to @umarali

---

Context

If the builder version used by the index-cdn.html is >= v1.0.13, the components list remains empty.

The init code used in the page might not be the good one.

@umarali please take a look.

TY!

  <!-- Builder CORE JS (Vanilla) -->
  <script type="module" crossorigin src="https://cdn.jsdelivr.net/gh/app-generator/[email protected]/dist/index.js">
    import { DNDBuilder } from "./index";

    DNDBuilder.setup();
    DNDBuilder.render();
  </script>

[✅ASSIGNED] Preview Works only for Index.html

STATUS: ASSIGNED to @EliasSbehat, Budget $25 (paid via UpWork)

---

Context

The Preview feature needs to be improved to work for the active page.
Currently, the index works only for index.html

@EliasSbehat please take a look.

TY!

[👉UNASSIGNED] Netlify Popup - Help not working

STATUS: ASSIGNED to @umarali

---

Context

The Deployment popup should provide minimal help to the user.

NOTE: This is a regression caused by the migration of the tool to NPM/CDN support

@umarali please take a look.

TY!

[✅ASSIGNED] Preview Improvements

STATUS: ASSIGNED to @umarali

---

Context

The current layout of the preview might be improved by the following changes:

• Center the control buttons
• adjust the width of the modal based on the selected device
  • if this is not possible, center the viewport (now stands aside)
• Remove the borders injected by the mouse over events

A possible solution might be:

• Deep copy the content of the Dropzone
• cleanUp the classes injected by the mouseOver events for components highlighting
• inject the HTML code in the viewport

@umarali please take a look.
TY!

---

[✅ASSIGNED] Download Option

STATUS: ASSIGNED to @EliasSbehat, Budget $100 (paid via UpWork)

---

Context

The codebase needs to be improved with a download option (currently only PREVIEW is available).

The download needs to be a ZIP archive with the following:

<site.zip>
   |-- index.html 
   |-- assets/
          |-- CSS 
          |-- js 
          |-- images   

NOTE: The project doesn't have a backend (yet).

[✅ASSIGNED] Move Styling outside JS Code

STATUS: ASSIGNED to @umarali

---

Context

In order to respect the SPECS and make the builder decoupled from the UI that it manages, the codebase needs the following enhancements:

• remove hardcoded style
• Isolate the CSS in style.css

If the builder needs to load and apply rules during runtime, this needs to be done from external (small) CSS files with suggestive names:

• preview.css
• whatever.css

Having this separation, we can easily apply the required changes when the builder is used in other kits.

TY!

[✅ASSIGNED] Page Name Update - Not persistent after update

STATUS: ASSIGNED to @EliasSbehat,, Budget $25, paid via UpW

---

Context

The user creates a new page and later updates the name. This is correctly managed in the editing tabs and PROPs panel

Issues:

• the NEW page name is not persistent on page refresh
  • when the user hits the F5 in the browser
• this issue is visible also in the Preview
  • old name is used

The solution is to update the name in all related contexts saved in the localStorage.

@EliasSbehat please take a look.

TY!

[✅ASSIGNED] Code Preview Feature

STATUS: ASSIGNED to @umarali

---

Context

The codebase needs to allow users to preview the current design.

Here are the changes:

• Add a new button in the navigation bar
• when the user clicks,t the current design can be previewed in a modal window

For Questions, feel free to ask here.

TY!

[✅ASSIGNED] Custom Style & CSS Classes

STATUS: ASSIGNED to @EliasSbehat, , Budget $50 (paid via UpWork)

---

Context

For each selectable element, the PROPS tab needs to provide a minimal UI for styling:

• Style (label)
• input where the current styling is injected and the user can edit
• Classes
  • input for existing classes
  • pills for the existing classes that the user can dismiss (delete)

@EliasSbehat please take a look.

TY!

[✅ASSIGNED] Persistence React/Redux & Refactoring

STATUS: ASSIGNED to @yurec133

---

Context

The codebase pattern might be improved if the persistence is managed by React/Redux instead of localStorage (the current solution)

@yurec133 Please take into account this request.

Before updating the code, please explain the advantages of such integration.

Ty!

[✅ASSIGNED] Manage Multiple Pages

STATUS: ASSIGNED to @EliasSbehat, , Budget $150 (paid via UpWork)

---

Context

The project needs to manage multiple pages using a tabbed view with tabs

• POS_1: Globals (JS, CSS) - see #34 Site Global Assets
• POS_2: index.html - active by default
• POS_3: another page (if defined)

The last control (not incorporated in the tabbed view) it's a plus sign + that will create a new page (tab) when clicked

The user should be able to click on TABs and edit the corresponding pages

@EliasSbehat, please take a look.
TY!

---

[✅ASSIGNED] Cool improvements by EliasSbehat (active contributor)

STATUS: ASSIGNED to @EliasSbehat,

---

The magic list

@todo

[✅ASSIGNED] Dashboard Layout

STATUS: ASSIGNED to @EliasSbehat

---

Context

The current layout of the builder uses a single-column layout where the components are horizontal.

The evolution needs to provide a left sidebar where the user can drop elements on the sidebar.

@EliasSbehat take a look and proceed with the code.

TY!

[❔Feature Request ] Keyboard Shortcuts / UNDO Control

Being able to ctrl+z for example after you've dropped an element to undo the element. I built an open source VanillaJS keyboard handler w/ combinations if you're interested in using that. I guess it would be a matter of keeping the history stored. Something as easy as even just one step back would be useful in speeding up the design process.

https://github.com/ForestOfKnowledge/ModernKeyMapper

[✅ASSIGNED] Page Globals - SEO, Externa CSS, External JS

STATUS: ASSIGNED to @EliasSbehat, , Budget $50 (paid via UpWork)

---

Context

The current page needs to be customized regarding the Global Data:

• SEO
  • Title
  • description
  • keywords
• External CSS
  • a single URL
• External JS
  • a single URL

@EliasSbehat please take a look.
TY!

---

[✅ASSIGNED] Delete & Reorder option

STATUS: ASSIGNED to @EliasSbehat, , Budget $50 (paid via UpWork)

---

Context

Root components (GRIDs or standalone) need to support the following:

• change order: UP, DOWN
• delete component

How it works:

• on mouse-over, the ROOT component needs to have:
  • UP, DOWN arrows to change the order
• Delete Control
  • classic x control positioned on the top right corner of the component

PROPS associated with each component - RIGHT Sidebar

The RIGHT Sidebar needs to be dynamically updated based on the element clicked by the user:

• span: in place edit
• paragraph - Quill Editor
• image: the user can update the URL

Other interactions might be added to this list.

@MohammadMargub please take a look and proceed with the code.
TY!

[✅ASSIGNED] Persistence on Page Refresh works only for Index

STATUS: ASSIGNED to @EliasSbehat, Budget $25 (paid via UpWork)

---

Context

In the context of multi-page support, when the user reloads the page, the existing edits (all pages) need to be restored.
Currently, this works only for the index.html.

@EliasSbehat please take a look.
TY!

[✅ASSIGNED] Clear Works only for index

STATUS: ASSIGNED to @EliasSbehat, Budget $25 (paid via UpWork)

---

Context

In the context of multi-page support, the clear handler needs to do the following:

• would be nice to have confirmation from the user
  • via a modal
• Reset index.html
• Delete all pages (except index)

In other words, the clear action needs to put the app in the initial state (first-time action for a user).

@EliasSbehat please take a look.
TY!

[✅ASSIGNED] Server Components - BS5 Kit

STATUS: ASSIGNED to @ravirasadiya

---

Context

The BS5 Kit needs to be enhanced with more categories and 2 or three components for each category

The HTML code for the components needs to be copied from BS5 library:

https://getbootstrap.com/docs/5.3/components/accordion/

@ravirasadiya please take a look.
TY!

Sidebars - Needs to be incorporated in Components

A sidebar is just another kind of component and needs to be in the Components set, at the 2nd position:

@MohammadMargub please take a look.
TY!

[✅ASSIGNED] BS5 Components - Card is not responsive

STATUS: ASSIGNED to @ravirasadiya

---

Context

One of the BS cards, the one with an image is not rendered correctly. Here is the snapshot

On the 2nd card, the button should be below the image, just like for the first one.

@ravirasadiya please take a look.

TY!

[UNASSIGNED] Card component styles act differently in Grid

Context

Card component styles act differently when dropped in the viewport vs a Grid.
Quick screencast here.

[✅ASSIGNED] New Component with Image (remote URL)

STATUS: ASSIGNED to @ravirasadiya

---

Context

In order to validate the editing of IMG.src a component that provides an IMAGE needs to be added to the bs5 kit.

@ravirasadiya please add a new card that provides an image. Something like this:

Related Issue: #21 Component PROPS - Images URL

[✅ASSIGNED] Multi-Page Preview - Enhancement

STATUS: ASSIGNED to @EliasSbehat, Budget $25 (paid via UpWork)

---

Context

In the current version, the preview works only for the current page.
Would be nice to have a complete PREVIEW feature where the user can switch the pages in the same modal.

@EliasSbehat please take a look.

TY!

---

[✅ASSIGNED] Pixel (free) - Preview Not Working

STATUS: ASSIGNED to @EliasSbehat

---

Context

Pixel LITE kit has been integrated into the branch kit-pixel

https://github.com/app-generator/free-site-builder/tree/kit-pixel

The Drag & Drop layout looks good, but the preview is broken.

@EliasSbehat please take a look and commit the FIX on the same branch for validation.

TY!

[✅ASSIGNED] Navigation & Layout Improvements

STATUS: ASSIGNED to @ravirasadiya

---

Context

The navigation bar needs to be on top, with the control buttons center aligned.

Summary of the changes:

• navigation is on top of all containers
  • control buttons are centered
• LEFT (components) and RIGHT (props) panels are visually at the same level
• the label index.html is hardcoded above the drop zone.

@ravirasadiya please take a look.

TY!

---

[✅ASSIGNED] Netlify Deploy

STATUS: ASSIGNED to @umarali

---

Context

In the current solution, user can download and use the website but would be nice to have a LIVE deployment using the most simple solution.

Netlify, a popular platform for deploying and hosting static websites, might be a good choice. One of the key reasons for choosing Netlify is its support for programmatic deploys, which allows to automate the deployment process directly from the application.

@umarali thank you for this idea. Please take a look and proceed with the code.

TY!

[✅ASSIGNED] Builder CORE Improvements applied for v1.0.16

STATUS: ASSIGNED to @umarali

---

Context

@umarali please add all the functional improvements that need to be done in the CORE of the builder.

PRIO:

• stability
• codebase pattern
• remove all runtime exceptions (JS console)

TY!

[✅ASSIGNED] Alternative PREVIEW Option (currently iFrame)

STATUS: ASSIGNED to @deroude

---

Context

The current cross-kit PREVIEW made with iFrame might hit the wall. Related issue:

#89

We might need another pattern.

@deroude please take a look.

TY!

[✅ASSIGNED] Add Mouse and Pointer Events in Preview Mode

Context:
The current preview mode offers a static view of the layout and doesn't capture mouse and pointer events such as clicks and hovers. This will allow for realistic testing of layout and component interactivity.

[✅ASSIGNED] Usable via NPM

STATUS: ASSIGNED to @yurec133

---

Context

Once the new codebase migration is validated, the product needs to be updated to be used as an NPM package.

The builder can be initialized on any page using local build or CDN import.

TBD

[✅ASSIGNED] Sidebar Items Order

STATUS: ASSIGNED to @umarali

---

Context

In the latest version, the components JSON consumed by the server is generated and the order cannot be forced to be arranged using a specific order (defaults always alphabetically).

The fix should force having in the UI always the following order (from TOP to the BOTTOM)

• Grid
• Navigation
• Common
• The rest of the categories
• Footer (at the end)

@umarali please take a look.

TY!

[✅ASSIGNED] Site Global Assets - JS, CSS

STATUS: ASSIGNED to @EliasSbehat, , Budget $50 (paid via UpWork)

---

Context

The project needs to provide a way to allow the user to code. To have this, the main area becomes a tabbed view, where:

• Tab1 -> Globals
  • Styles
  • JS Code
• Tab2 - index.html

The above content (CSS, JS) is used across all pages.

@EliasSbehat please take a look.
TY!

---

Builder CODE Directory

Hello,

The code for the builder needs to be added on top of the existing code BUILDER directory

• reuse the current tooling vite
• reuse the codebase (preserve all features)
• style the app using STYLE.css

More input: https://youtu.be/hsGhtVuyPcI

@MohammadMargub please take into account the above.
TY!