SUPERINTUITIVE CMS / DOCUMENTATION

From your first edit.
To your next possibility.

A practical guide to building with SuperIntuitive. Learn the editor, understand your Blocks, and take a page from an idea to a published website.

21 focused topicsAll 12 editor toolsBuilt with our CMS

Make your first edit ↗A five-step introduction Build with Blocks ↗Pages, content, and reuse Publish with confidence ↗Dev, Test, and Live

All topics are available below. Search and the mobile menu need JavaScript; use your browser’s Find command to search this guide.@media(max-width:720px){#si_block_CMSDocumentationNavigation{position:static;visibility:visible;transform:none;width:auto;border-bottom:1px solid #293950}}

01 / FIRST STEPS

Start with a small change

The fastest way to understand SuperIntuitive is to edit something you can already see. You can explore the public editor demo without an account, or sign in to your own installation to save your work.

Open the editor. Right-click a heading, paragraph, or other page element. The Add, Edit, and Tools menu opens beside your selection.
Change the words. Choose Edit, then use the Main tab to change the selected element’s content.
Make it your own. Try a color, spacing, or font in Styles. Use Add to place a new element inside a page Block.
Save the right thing. On your own site, Save block writes the selected Block to Dev. In the public demo, saving is disabled and Start over restores the canvas.
Publish deliberately. Previewing Dev is separate from publishing. Save, promote Dev to Test, review, then promote Test to Live.

For your first real page, follow Site, Page & Blocks, and Saving & publishing in that order.

02 / THE BUILDING BLOCKS

How a page fits together

A SuperIntuitive website is assembled from database records. The page you see is the result of its content, its settings, and the Blocks placed on it.

Page: A URL path with a title, metadata, body options, and a collection of Blocks.
Block: A reusable unit of HTML, CSS, and JavaScript. A header, introduction, feature list, or footer can each be a Block.
Placement: The relation between a page and a Block. Its order and layout options determine how that Block appears on that page.
Element: A heading, button, image, container, or other HTML element inside a Block. Right-click it to select and edit it.
Widget: A reusable interface component with its own options, such as a window, tabs, menu, or table.

Page content and Block HTML, CSS, and JavaScript are stored in MySQL/MariaDB. Framework assets and uploaded media have their own files; copying application files alone does not copy your site’s content.

03 / SET UP YOUR OWN SITE

Install the SIPL edition

The SIPL edition runs the CMS natively through SIPL and uses MySQL/MariaDB. The application distribution and language runtime are installed separately. The native edition is currently a preview; check the feature status below before choosing it for a project.

Extract a clean SuperIntuitive SIPL distribution into its own folder.
Install a SIPL runtime with native MySQL/MariaDB and bcrypt support. Make sipl.exe available on PATH, or set SI_SIPL_RUNTIME for the launcher.
Start start-sipl.bat, or run the command below from the extracted folder. The default package opens at http://localhost:8092; deployments can configure another port.
Read the private installation key locally and enter it in the first installer step. Keep this key private.
Choose an empty MySQL/MariaDB database and its user, or supply an account allowed to create a new database and user. Choose your locale and administrator account, review, and install.

PowerShell

sipl.exe run core_sipl/main.sipl
# In a separate terminal, read your own local installation key:
Get-Content .\core\setup.token

The administrator password policy is 10–72 bytes. A completed installation writes private configuration and a permanent installation lock. Sign in with your administrator account for future management.

Connect an existing site

Configure core_sipl/config.local.json before startup with your existing database connection, domain, and subdomain. Do not run fresh setup over an existing installation. If two backends point at the same database, their edits affect the same content, while their login sessions remain separate.

Current native feature status

Area	SIPL edition
Pages, Blocks, visual editing, CSS and JavaScript	Implemented
Administrator sign-in, users, roles, settings, local text, and content promotion	Implemented
Fresh installation	Implemented with an empty database and installation key
Media upload, promotion, and recycling	Pending native support
Plugin package installation and removal	Pending native support
New entity schemas, backup and installer export	Pending native parity
Remember me and forgotten-password email	Unavailable in the current native application

A visible tool or button does not guarantee its server operation is available in every edition. SIPL reports pending operations explicitly; it does not silently execute them through PHP.

04 / YOUR WORKSPACE

Open and navigate the editor

On your own site, sign in as an administrator and work in Dev. Right-click an element to select it and open the context menu. Double-click can also select an element; right-clicking the selected element again clears selection. Closing the menu with X clears the element and Block selection.

Menu	Use it for
Add	Place HTML tags and widgets in a Block.
Edit	Change the selected element’s content, attributes, and styles.
Tools	Open Page, Media, Site, Styler, Scripter, Widgets, Language, Entities, Plugins, Security, Users, and Settings.

Useful shortcuts

Ctrl/Cmd + S: save the selected Block to Dev when working in the editor.
Escape: cancel active placement or dismiss editor interactions.
Arrow keys: move positioned elements by 1 pixel; hold Shift for 10 pixels.
Delete: ask to remove the selected element.

Movement and deletion shortcuts leave text fields alone. The selection indicates unsaved changes. A visible change in the canvas is not proof that it has reached the database.

05 / BUILD VISUALLY

Add elements and widgets

Open Add and search Tags or Widgets. Choose the smallest useful HTML element: a heading for a heading, a paragraph for text, a button for an action, or a container for a group.

Drag the tag or widget onto a page Block. Watch the translucent placement preview and destination.
Drop it when the preview shows the right position. You can also click the item, then click the intended page position.
Press Escape to cancel. An invalid drop leaves the page unchanged.
Select the new element and use Edit to set its content and appearance.
Save the containing Block when you are ready.

Put related elements inside a container instead of positioning every child independently. Use CSS layout and spacing to keep the result usable on narrow screens.

06 / MAKE IT YOURS

Edit content, attributes, and styles

The Edit panel acts on the selected element. Check the tag and ID in its header before making a change.

Main: Edit the element’s content and common properties. Fields support normal typing and paste. HTML content is markup, so changing it can replace nested elements.
Attributes: Set attributes appropriate to the tag, such as a link’s destination, an image’s alternative text, an ID, or a class. Event fields contain executable browser JavaScript.
Styles: Set CSS values for this element. Type a value directly or use the available controls for colors, sizes, and other properties.

Give meaningful images useful alternative text. Use links for navigation and buttons for actions. Keep IDs unique on the page; classes are the better choice for styling several elements together.

Save block writes the containing Block’s edited HTML to Dev. If you also changed a Block stylesheet, script, or page metadata, save those through their own controls before publishing.

07 / TOOLS / PAGE

Page & Blocks

Tools → Page manages the page you are viewing: its path, title, favicon, metadata, body styles, page settings, and Block placements.

Create or import a Block

Create a new Block for content that should be independent, or choose Import Block to reuse existing content.
In the import form, select an available Block. Blocks already on the page are excluded. Refresh the list if needed.
Confirm the placement, then arrange its order and layout.
Use the Block’s save controls for HTML, CSS, JavaScript, or placement options as appropriate.

Block content and page-specific layout are different records. Removing a placement from one page is different from deleting the underlying shared content.

Save page options separately

Save Page for title, metadata, body options, and related page changes. Saving a Block does not automatically save all page options. Changes to a URL path or redirect are structural; review affected links before changing them.

Use the deployment controls beside the relevant values to promote saved data. See Saving & publishing for the full sequence.

08 / TOOLS / SITE

Create and find pages

Tools → Site shows the site directory and the Create a new Page form. Use it to find existing pages or add a new destination.

Enter a descriptive page name and a unique path. The path is the URL location, such as about or products/studio.
Create the page. The editor can offer to navigate to it.
Open Tools → Page and add or import the Blocks that will make up the page.
Set a useful page title, add content, and review your navigation links.
Save and promote the relevant content and page options through Test to Live.

A new page does not automatically receive every Block from another page. Import your shared header, footer, and other reusable sections where needed.

09 / TOOLS / STYLER

Design with Styler blocks

Styler builds reusable page styles through visual rule cards, selector choices, property rows, and value controls. The visual workspace opens by default; leave the Code checkbox unchecked for this walkthrough. You can design a consistent set of cards, headings, or buttons without starting with a source editor.

Understand what you are editing

A CMS Block is the content unit that owns the stylesheet. A style block in Styler is a rule card inside that stylesheet. Each card answers two questions: which elements should it match, and what appearance should those elements have? One CMS Block can contain many style cards.

Element Styles in the Edit tool changes one selected element. Styler changes stylesheet rules that may match several elements. Editing a Styler property does not directly change the selected element and is not a substitute for saving its HTML.

Find your way around the workspace

Stylesheet selector: Chooses the CMS Block whose saved styles you want to load. Confirm the source before changing a card, especially when several Blocks look similar.
Selector tokens: The colored pieces at the top of a card describe its target. Click a token to change it; use the plus control to add another piece.
Property table: Each row pairs a property with its value. The grouped property menu helps you find the appearance or layout setting you need.
New Style: Adds a rule card. Its initial target is a placeholder, not a useful page selection: replace it before saving.
Update and Save: Update synchronizes the visual rules. Save writes the current stylesheet to the CMS. Only saving makes an edit persistent.

Choose a precise target with the selector builder

Open a selector token to choose its category. The builder offers elements, classes, IDs, attributes, pseudo-classes, pseudo-elements, combinators, and at-rule entries. Available page classes and IDs are refreshed when you open the menu, so existing targets can be selected rather than invented.

Use an element target for a type of element, a class for a reusable group, or an ID for one identified element. Additional tokens can narrow a target to content inside a particular Block. A combinator describes the relationship between those pieces; it is not simply decoration. State-related choices can distinguish an interactive state, while pseudo-elements refer to a particular part of an element.

Build your first consistent card style

Choose the source. Open Styler from Tools and select the CMS Block that contains the cards you want to style.
Add or select a rule. Use New Style for a new pattern, or choose an existing rule card to refine one.
Set the target. Replace the placeholder with the intended class or Block-specific target. Confirm that it matches all the cards you want, and nothing unrelated.
Add the properties. Use the grouped menu and Add new property to choose spacing, background, text color, border, or other relevant settings.
Set the values. Edit each value and use any offered color, opacity, or property-specific controls. Numeric values still need an appropriate unit where the property requires one.
Save and inspect. Save the stylesheet, then check the actual page. Compare several cards, not just the one originally selected.

Refine values without losing the rest of the rule

The value field remains editable even when a property also offers convenient controls. A picker can help select a color or opacity, but not every property has a dedicated picker or preset. Choose a meaningful value for the property you are changing.

Use Other CSS property... when a property is outside the catalog, including custom properties. Existing unfamiliar property names and values are retained. The clear button removes that one declaration from the rebuilt stylesheet without clearing the other property rows.

Change a small group of related properties at a time. If the result is not visible, first confirm the target and saved source, then check whether another rule or an element-level style is taking precedence.

Understand rule order and advanced content

Rule cards can be dragged onto one another to swap their order. Order can affect the result when competing rules otherwise have equal priority; moving a card does not make it stronger than every other style. Before reordering, identify which cards match the same elements.

Existing comments, custom values, and complex grouped rules are preserved. Nested media or support rules can appear as editable rule fields rather than a fully visual set of breakpoint controls. The selector categories are not a complete responsive-design wizard. Leave unfamiliar advanced rules intact while working on ordinary property cards.

Save, review, and publish the stylesheet

Save includes the latest visual edits without requiring Update first. Update alone does not save to the database. Saving Block HTML alone does not save this stylesheet, and saving a Dev stylesheet does not automatically publish it to visitors.

Reload Dev to confirm the stored result. Review wide and narrow layouts, readable contrast, keyboard focus, hover states where relevant, and other pages that share the Block. Then promote the saved stylesheet through Test to Live using the publishing workflow.

10 / TOOLS / SCRIPTER

Build behavior with Scripter blocks

Scripter organizes browser behavior into visual programming blocks. Blocks is the default view: choose a CMS Block in the script selector, then work with the Build palette, Flow, and Inspector. Keep the Code checkbox unchecked for this guide.

Read the three-part workspace

Build: The palette on the left contains templates grouped by purpose. Find a block filters the available choices. Click a template to insert it into the selected body, or drag it to a drop position.
Flow: The center shows the ordered program. Cards display their kind, summary, and line indicator, with Edit, a drag handle, and expansion controls. Nested bodies reveal where work belongs.
Inspector: The right side edits the selected card. Its fields depend on the block type. Apply changes commits your edits to the program; move, Duplicate, and Delete actions change its structure.

The CMS Block selected at the top owns the saved script. Cards inside Flow are programming blocks, not new CMS content Blocks. Confirm that source before editing; switching sources asks before discarding unsaved work.

Choose blocks by the job they do

Palette group	Available building blocks	Use it for
Data	Variable, Constant, Object, Array	Names, values, and collections that the behavior needs to remember or use.
Control	If / else, For loop, For each, While, Switch, Try / catch	Decisions, repeated work, multiple alternatives, and error-handling paths.
Functions	Function, Async function, Return, Call, Class	Reusable routines, calling existing behavior, returning results, and grouping related behavior.
Browser	Event listener	Responding to an event on an intended browser target.
Advanced	General-purpose expert editing	Handling structures outside the simplified fields. It is optional and outside this GUI walkthrough.

Start with the smallest structure that fits the job. A branch suits a decision; a loop suits repeated work; a function suits a reusable routine. A template is a starting point, not confirmation that the resulting behavior is already correct.

Edit a card through the Inspector

Select it. Click the card or its Edit button. Enter or Space can also activate a focused card.
Read the fields. A data declaration may show Declaration, Binding, and Value. A function shows Name and Parameters. A branch shows Condition; a loop may show Initialize, Condition, and Update, or Binding and Iterable. Calls expose Call and Argument fields.
Change only what belongs to that card. Names should identify the intended data or routine. Conditions should describe the decision. Call arguments supply the inputs that the chosen behavior expects.
Apply changes. Commit the edit before choosing another card. Pending edits are not silently abandoned: the status reports when an unapplied draft needs attention.
Check Flow. Confirm the summary and placement. Use Undo if the edit was not the intended one.

Use nested lanes to express when work happens

Functions, callbacks, branches, loops, switch cases, classes, and exception handlers expose separate bodies or lanes. The same card can mean very different things depending on the lane containing it. A card in a loop repeats; a card inside one branch runs only when that branch is chosen.

Expand the parent card and select the + on the intended body. This chooses that insertion lane and focuses palette search. Find and click the template you need, or drag a template to the desired position. Check both the parent and the order of its children before continuing.

For an interactive control, first decide which existing element supplies the event, which event matters, and what response is needed. Add an Event listener, inspect its call and arguments, then work inside its callback lane. A decision can separate allowed and disallowed actions; a Call can invoke an existing routine. Meaningful targets, arguments, and conditions are still required. Keep response work inside the callback if it should happen on the event rather than when the page first loads.

Reorganize without losing the structure

Drag a card by its handle to move it, including its nested bodies. Inspector move controls adjust its position; Duplicate makes another copy; Delete removes the selected block. Select the correct body before adding more work. Duplicating a declaration may require a different name, because two conflicting bindings are not valid simply because they are separate cards.

Moves and edits are validated in their surrounding structure. An operation that is invalid in its new scope is rejected instead of leaving a broken program behind. Undo and Redo track block edits, with up to sixty history entries. They help during an editing session; they are not a replacement for saved versions and backups.

Use validation as feedback, not proof of behavior

When an edit is invalid, the status reports the problem with a line and column and keeps the last valid program intact. Fix the pending field or structural change before saving. Existing invalid source may open the repair view with an explicit error rather than pretending it is a valid set of blocks.

Loading, rendering, and rearranging blocks do not execute the edited behavior. Update validates and synchronizes the program; it is not a test of the intended interaction. A structurally valid program can still target the wrong element, repeat at the wrong time, or respond to the wrong event. Exercise the actual page to verify those choices.

Save and test from a clean page

Save includes pending Inspector edits only if they validate, then uses the normal CMS script-save path. Saving refreshes the page script preview and can execute browser behavior. Reload Dev afterwards and test again from a clean start, so repeated preview saves do not hide duplicate event bindings or stale state.

Check the initial state, the intended interaction, keyboard operation, repeated use, and relevant error paths. Confirm the stored behavior survives a reload. Then promote the saved script through Test to Live; saving the Block HTML does not save or publish an unsaved script.

11 / TOOLS / WIDGETS

Work with widgets

Widgets are reusable interface components. Add → Widgets places a component on the page; Tools → Widgets helps inspect existing instances and their options.

Add a widget to a Block and select it.
Open Widgets and choose the instance you want to inspect.
Change its available properties, using Edit widget on page when you need to return to the instance.
Save the containing Block and its widget options. Reload Dev to confirm both appearance and behavior.

The available library includes components such as windows, tabs, menus, trees, tables, and accordions. A widget’s presence is separate from the availability of any server action it uses: an uploader, for example, still needs a supported upload backend.

Use the Widget Editor for deeper component work only when you understand its effect on other instances. Test keyboard access and narrow layouts as well as the initial appearance.

12 / TOOLS / MEDIA

Use images, fonts, and media

Media organizes the site’s image, font, audio, video, and other media records. Reference a media item from an appropriate element and give it the dimensions and alternative text it needs.

The deployment workflow can use separate Dev, Test, Live, and rollback media variants. Promoting Block content is not the same operation as promoting its media files.

Media URLs are public. A restricted page does not make its linked files private. Keep confidential attachments in a storage system designed to authorize every download.

The public demo supplies no private media library and accepts no uploads. In an installed site, confirm any upload or promotion succeeds before publishing content that depends on it.

13 / TOOLS / LANGUAGE

Translate with local text

Language manages installed languages and reusable translated text. Local-text records let the same content resolve to different language values when the page is rendered.

Choose a supported language and add it to the installation.
Create or choose the local-text entry you want to translate.
Fill the relevant language values and save them.
Use the generated local-text marker in your content. Keep its exact spelling rather than inventing or shortening it.
Review the page with the intended browser language settings and a fallback language.

Rendering considers supported browser languages, the site’s default language, and English when available. Adding a language is a schema-level change and is marked irreversible in the interface; plan the languages you actually need.

Language selection and translation storage do not automatically translate your writing. Supply and review the actual translated values.

14 / TOOLS / ENTITIES

Inspect structured content

Entities exposes structured records and their fields. It is useful when you need to work with content as data rather than editing the rendered page.

Choose an entity, inspect its available records, and use only the operations permitted for your account. The server enforces tenant ownership and permissions; a record ID does not grant access by itself.

Pages, Blocks, settings, users, and relations are connected records. Use the dedicated Page, Site, Users, and Security tools for normal authoring so those relationships are easier to understand.

Do not change ownership fields or system relations to work around an error. Use a database clone for experiments with the data model.

15 / TOOLS / PLUGINS

Understand plugins

Plugins extends the CMS through installed packages. The tool includes Local Plugins, Plugins Repo, and Plugin Editor views.

Installed plugin scripts and styles can run on your pages. Review the package’s source and compatibility, test it with your site, and keep a backup of the previous working state before changing it.

The public demo intentionally excludes your real plugin source and downloaded packages. Exploring the tool does not install anything.

16 / TOOLS / SECURITY

Define access with roles

Security defines what roles may do. Each role has a permission form; switch role tabs to review the grants, edit the relevant permissions, and save the role explicitly.

The permission model includes read, create, write, delete, append, and append-to operations on entities. A role’s grants are combined with the user’s other roles. Assign the smallest set of permissions needed for the work.

Guest: The public visitor context. Guests normally view Live content and do not gain authoring access.
Tester: Can preview Test and Live. Tester preview access does not grant Dev editing.
Admin: Can author in Dev and use privileged management operations, subject to the server’s permission checks.

Use the Users tool to assign roles to people. Page access restrictions are checked on the server. Test a restricted page while signed out and with an account that has the intended role.

Switching role tabs preserves unsaved checkbox edits, but persistence still requires Save. Keep a working administrator account while changing access. A checkbox change in the browser is not a completed server update.

17 / TOOLS / USERS

Manage people and sign-in

Users is for administrator-managed accounts: create users, assign or remove roles, and perform the supported password and account operations.

Use each person’s own account. Choose a password within the 10–72-byte policy, then assign the roles their work needs. Password and role changes affect subsequent application requests.

Account controls

Signed-in users can use account controls for supported password changes and logout. Administrators can choose Account → Edit login form to edit the guest form without signing out. Done editing login form restores the account controls.

Native authenticated sessions expire after 30 idle minutes or 12 hours in total. PHP and SIPL keep separate sessions even if they share the same database accounts. The public demo exposes no real users and cannot change accounts.

18 / TOOLS / SETTINGS

Use site and page settings

Settings manages named site values and editor utilities. Use meaningful setting names and check where a setting is consumed before changing or deleting it.

Page settings in Tools → Page are attached to the current page. Site-level settings can affect shared behavior across the installation. A value displayed in a rendered page or client-side script is visible to visitors, so it is not a place for private connection credentials.

The Settings tool also includes utilities such as the HUD and Scenegraph. The scene graph helps inspect the element hierarchy; it can be useful when a nested element is hard to select visually.

Some utilities are edition-specific or unfinished. PHP Info does not make PHP part of the SIPL backend, and native backup or installer export controls are pending. Save the setting or owning content explicitly and review the response.

19 / DEV → TEST → LIVE

Save, review, then publish

SuperIntuitive separates saved development content from the content public visitors see. Previewing a stage changes your session; promoting data changes what is stored for the next stage.

01 / DevEdit and save

02 / TestReview the saved result

03 / LivePublic visitors see this

Save in Dev. Save each changed Block’s HTML, style, script, and placement options as needed. Save Page for page-level options.
Promote Dev to Test. Use the green promotion action for the relevant saved value.
Preview Test. Check content, layout, links, forms, scripts, and mobile behavior. Testers can review Test and Live.
Promote Test to Live. Use the yellow action after review.
Check as a visitor. Open Live while signed out to verify the public result and access restrictions.

Promotions act on specific fields. HTML, CSS, JavaScript, page options, and placement options/order can need separate promotion. Previewing Dev does not publish it. Changing stages with unsaved edits asks before discarding them.

Media has its own deployment workflow, subject to edition support. Some structural changes, such as paths and relationships, are not fully staged like Block content. Review those changes before making them.

20 / OPERATIONS

Host and back up your site

A working backup needs the database as well as the files your installation depends on. Distribution ZIPs contain application code, not a copy of your site.

Database: preserve pages, Blocks, settings, users, roles, and their relations with a consistent MySQL/MariaDB backup.
Media and plugins: preserve the site’s uploaded media and installed plugin assets separately.
Private configuration: keep connection settings and installation state in protected storage. Do not publish credentials or installation keys.
Restore check: restore into a separate environment and verify content, media, sign-in, and permissions before relying on the backup.

The SIPL preview currently has no completed backup or installer export operation in the editor. Use your database and host backup tools. The Live rollback snapshot is not a full-site backup.

For public native hosting, use HTTPS and secure cookies, keep private source/configuration paths inaccessible, and configure request and connection limits at your reverse proxy. Preserve database transport verification and install a runtime with the required capabilities.

If you host the executable public demo, give it a dedicated origin and route only its approved sample resources there. This company site uses that isolation; it never grants public visitors an administrator session.

21 / QUICK ANSWERS

When something does not work

I cannot open the editor.

On your installation, sign in as an administrator and select Dev. Right-click an actual page element rather than the editor itself. Guests see Live without administrator controls. The public demo is the intentional exception and starts with the menu closed.

My changes disappeared after a reload.

Check whether you were using the temporary demo. On your own site, confirm Save succeeded for the correct Block and content type. A CSS or script edit needs its own save; Save Page and Save block cover different records.

I can see a change, but visitors cannot.

You may be previewing Dev or Test. Save the change, promote the relevant fields from Dev to Test and then Test to Live, and check again while signed out. Check the media stage separately.

The same edit appeared on another page.

The pages may share a Block. Importing an existing Block reuses it. Create an independent Block when you need different content.

A button reports a runtime capability requirement.

The current native edition may not implement that operation. Check the status table in Installation. An explicit error is not a successful save, upload, or publication. Restart the server after replacing its runtime executable so it actually loads the new build.

Sign-in fails when Remember me is selected.

Leave Remember me unchecked in the current native application. Ordinary session sign-in is available; persistent-token compatibility is a separate unfinished operation.

I receive a session or permission error.

Refresh the page and sign in again if the session expired. Ask an administrator to verify the account’s roles. Save your work before intentionally switching backends or restarting the server.

The public demo says it is busy.

Wait a minute before trying again. The demo has shared server request limits to protect the site. Its Start over button restores the published sample; it cannot recover temporary unsaved experiments.

Still stuck? Contact SuperIntuitive with the tool name, edition, visible error code, and the steps that reproduce it. Keep passwords, installation keys, and database connection strings out of your message.