Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/OmarMtya/engine.js/llms.txt

Use this file to discover all available pages before exploring further.

Engine.js lets you tune both the visual look and the spatial arrangement of the editor to suit your workflow. Color themes change the palette of the entire interface, while layout structures relocate the canvas viewport relative to the Hierarchy and Attributes panels. Both preferences are remembered across browser sessions through localStorage, so the editor always opens exactly as you left it.

​
Color Themes

Color themes are cycled by clicking the palette icon (fas fa-palette) in the configuration bar. Each click removes the current theme class from <body> and adds the next one in the array ['defaultColor', 'oscuro', 'azul']. The selected class name is also written to localStorage under the key skin.

Default

Class: defaultColor
Header: #30302f dark charcoal
Canvas background: #eee light gray
Body: white

Dark (oscuro)

Class: oscuro
Header: #30302f (unchanged)
Canvas background: white
Body: #474746 dark gray, white text

Blue (azul)

Class: azul
Header: #005DAB blue
Canvas background: #c7c7c7 medium gray
Body: #F4F4F4 light gray, #575757 text

​
Theme CSS Details

The theme classes are defined in css/esquemas.css. Below is a summary of the properties each class overrides:
CSS propertydefaultColoroscuroazul
body background(browser default)#474746#F4F4F4
body color(inherited)white#575757
header / #configuracion background#30302f#30302f#005DAB
canvas background#eeewhite#c7c7c7
input / select background(default)#c7c7c7#F4F4F4
label color#30302fwhite(inherited)

​
Applying a Theme Programmatically

// Apply the dark theme
document.body.classList.add('oscuro');
localStorage.setItem('skin', 'oscuro');

// Apply the blue theme
document.body.classList.add('azul');
localStorage.setItem('skin', 'azul');

// Return to the default theme
document.body.classList.remove('oscuro');
document.body.classList.remove('azul');
localStorage.removeItem('skin');

​
Layout Structures

Layout structures are cycled by clicking the window icon (far fa-window-maximize) in the configuration bar. Each click cycles through ['defaultEstructura', 'canvasDerecha', 'canvasIzquierda'] and saves the selected value to localStorage under the key estructura. Each structure class overrides the grid-column values of the three main panels using CSS !important, allowing the canvas to be repositioned without touching the HTML markup.

Default

Class: defaultEstructura
Canvas: columns 4–10
Hierarchy: columns 1–4 (left)
Attributes: columns 10–13 (right)

Canvas Right (canvasDerecha)

Class: canvasDerecha
Canvas: columns 7–13
Attributes: columns 4–7
Hierarchy: columns 1–4

Canvas Left (canvasIzquierda)

Class: canvasIzquierda
Canvas: columns 1–7
Hierarchy: columns 7–10
Attributes: columns 10–13

​
Layout CSS Details

PaneldefaultEstructuracanvasDerechacanvasIzquierda
#container-canvasgrid-column: 4/10grid-column: 7/13grid-column: 1/7
#jerarquiagrid-column: 4/1(unchanged)grid-column: 7/10
#atributosgrid-column: 13/10grid-column: 7/4grid-column: 10/13

​
Switching Layouts Programmatically

// Switch to canvas-right layout
document.body.classList.add('canvasDerecha');
localStorage.setItem('estructura', 'canvasDerecha');

// Switch to canvas-left layout
document.body.classList.add('canvasIzquierda');
localStorage.setItem('estructura', 'canvasIzquierda');

// Return to default layout
document.body.classList.remove('canvasDerecha');
document.body.classList.remove('canvasIzquierda');
localStorage.removeItem('estructura');

​
Persistence with localStorage

Both preferences are restored automatically when the editor loads. The inicializarVistas() function in js/vista.js runs an IIFE that reads skin and estructura from localStorage and applies the saved classes to <body> before the user interacts with anything: 
(function () {
  let skin = localStorage.getItem('skin');
  if (skin) {
    document.body.classList.add(skin);
  }

  let estructura = localStorage.getItem('estructura');
  if (estructura) {
    document.body.classList.add(estructura);
  }
})();
Because preferences are stored in localStorage, they survive page refreshes, browser restarts, and even system reboots — as long as you are using the same browser and have not cleared site data. If you want to reset to the defaults, open your browser’s DevTools, go to Application → Local Storage, and delete the skin and estructura keys.

Build docs developers (and LLMs) love

Get started for freeTalk to us