Visual Editor

Visual Editing lets you craft stunning content experiences, all within a user-friendly interface. Visual Editing experience offers:

Make changes to any document and see the impact reflected instantly across all connected content.
No more hunting for editable areas! Overlays act as visual cues that let you click and jump directly to the content you want to edit.

Sync Script

Add the next script to your HTML page, and by replacing <firebase-project-id> with your firebase project id:

HTML

<script id="localess-js-sync" type="text/javascript" async src="https://<firebase-project-id>.web.app/scripts/sync-v1.js"></script>

Listen for Events

Your application can subscribe to the Localess Visual Editor Events :

TypeScript

window.localess.on(['input', 'change'], (event) => {
  if (event.type === 'input' || event.type === 'change') {
    console.log(event.data);
    //Update your content data ...
  }
});

To highlight components in the Localess Visual Editor you will need to add data-ll-id attribute on the HTML tag with the content generated id, present under _id field for each generated schema:

HTML

<div data-ll-id="<schema id>">
  ....
</div>

Official Libraries

TypeScript

TypeScript is a free and open-source high-level programming language developed by Microsoft.

Angular

Angular is a TypeScript-based web framework developed by Google for building dynamic, single-page applications (SPAs).

React

React is a JavaScript library developed by Meta for building user interfaces, especially single-page applications (SPAs).

Vue

Vue is a progressive JavaScript framework for building user interfaces and single-page applications (SPAs).

Svelt

Svelte is a modern JavaScript framework that shifts work to the build step, producing highly optimized, vanilla JavaScript code.