Skip to main content
This is the most powerful part of the configuration. The section_library registers individual DOM components (e.g., Heroes, Features, Footers, etc) allowing users to drag, drop, and edit them visually.
squeditor.json
"section_library": [
  {
    "id": "hero_home_5",
    "name": "Hero Header 5",
    "type": "hero",
    "category": "header",
    "thumbnail": "/templates/lexend/squeditor-assets/sections/hero-home-five.jpg",
    "selector": "{{WRAPPER}} #hero_header",
    "tabs": [ ... ]
  }
]

Group Containers

Tabs and Accordions to structure the layout of your component settings organically.

Controls

Text, color, typography, repeaters, media and more tools to configure settings.
Section thumbnails must strictly follow this relative path structure referencing your template ID:
/templates/[template-id]/squeditor-assets/sections/[section-id].jpg

​
Preparing Editor Assets

To ensure a seamless experience in the editor, you must generate visual jpg/png thumbnails for your pages and sections so users know what they look like before dragging them into the canvas.

templates
[template-id]
squeditor-assets
pages
index-5.jpg
page-services.jpg
sections
hero-home-five.jpg
brands-marquee.jpg
Once your squeditor.json is configured and assets are in the correct path structure, the Squeditor application will automatically parse the JSON, ingest your HTML files, and generate a fully functional no-code visual builder environment perfectly compatible with your template!