Payo Studio 1.4.1

Universal HTML page builder.

Payo Studio is an optional visual editing layer for PHP-hosted HTML projects. It is designed to be reusable across different HTML themes, without a database and without forcing a theme to depend on the editor when the editor is not installed.

Contextual inspectorViews & LayersRows + ColumnsSections + AddonsDrag & dropSecure uploadsGlobal colorsNo database

Architecture

Optional integration

A normal HTML site works without Payo Studio. The owner explicitly runs the installer before the bridge is connected.

Override layer

Text/style/media changes are stored as JSON overrides instead of rewriting template source on every click.

Reusable builder layer

Saved Sections/Addons are stored in a protected Library and page insertions are stored as layout operations.

Theme independent

The editor detects HTML pages and CSS custom color variables; it has no Neravo-specific PHP dependency.

Installation

Required: PHP 8.1+, JSON, Sessions, DOM, and write access during installation. Fileinfo + GD are required for secure image upload.

Copy the module

Place payo-studio/ in the root of the HTML project.

Open the installer

Visit /payo-studio/install/.

Check

The wizard verifies PHP, storage/project write access, DOM, JSON, sessions, Fileinfo and GD.

Admin

The site owner chooses the administrator username and password. Passwords are hashed; plain-text passwords are not written to storage.

Project

The installer scans HTML files and CSS color variables. Utility HTML files can opt out with <meta name="payo-studio" content="ignore">.

Install

Original HTML pages are backed up and a relative bridge.css stylesheet and bridge.js script are added to connected pages.

Installer lock: once configuration exists, the installer redirects to the authenticated dashboard instead of creating another administrator.

Contextual inspector

The inspector deliberately does not display every setting for every HTML node.

Selected element	Controls shown
Plain text / heading / paragraph	Text, text color, font size, line height, alignment, visibility.
Text link	Text, URL, typography, visibility.
Button / CTA	Relevant text/link controls plus text/background color, radius and vertical padding.
Image	Upload/replace image, alt text, radius and max width.
Section / container	Background color, background image, padding, margins, radius and visibility.

Example: a paragraph does not show a “Background image” uploader. Background media belongs to containers/sections, not simple text nodes.

Three clear edit actions

Action	Behavior
Cancel	Discard unsaved preview changes and close the current inspector.
Save	Persist the current element changes and keep the inspector open.
Save & Close	Persist the current changes, then close the inspector.
Esc	Safely cancels the currently open inspector/panel.

The editor warns before reload/exit when unsaved changes exist.

Views, Layers & Interact mode

Views lists the default screen plus detected <template id="view-*"> popup screens, so modal/SPA-style themes can be edited without relying on their navigation while Edit mode is active. The same panel lists the currently rendered sections/layers and can restore blocks that were deleted (hidden) through Payo Studio.

Edit mode

Clicks select elements and open the contextual inspector.

Interact mode

Clicks pass through to the original theme, so dropdowns, filters, menus and links work normally.

Section Builder — Rows & Columns

Use Add Section in the live toolbar to insert a new builder section before or after an existing section. Choose a visual layout preset before creation.

Layout presets

1, 2, 3 or 4 equal columns, 1/3 + 2/3, 2/3 + 1/3, 1/4 + 3/4, 3/4 + 1/4 and asymmetric three-column layouts.

Column drop zones

Every generated column is an independent Addon drop-zone in Edit mode. Drag saved or Core Addons directly into the desired column.

Core Addons

Heading, Text, Button, Divider and Spacer are available immediately in Library, alongside reusable blocks saved by the user.

Delete safely

Every inserted Section/Addon can be deleted. Removing a builder section also removes dependent child block operations that were anchored inside it.

Security: Add Section and Core Addon requests send only whitelisted IDs such as layout=1-2 or addon=heading. The server generates the markup; arbitrary client HTML is not accepted for these operations.

Reusable Sections & Addons

Select a suitable element and use the Reusable Library area in the inspector.

Save as Section

Recommended for semantic sections and larger page containers. Useful for heroes, feature areas, pricing sections, testimonials and footers.

Save as Addon

Recommended for smaller reusable units such as cards, visual blocks, buttons, media tiles and other component-like content.

Security boundary

The browser sends the selected element snapshot to the authenticated API, but the server does not trust that HTML. The server sanitizes it through a DOM allowlist before it reaches the Library.

No <script>, iframe, embed, object, form or arbitrary code blocks.
No inline onload/onclick event handlers.
No unsafe javascript:, vbscript: or data: URLs.
IDs are removed from reusable blocks to avoid duplicate-ID collisions when a section is inserted more than once.
Inline style attributes are removed from Library snapshots; theme classes are preserved. Styling can be adjusted through the inspector.

DOM is therefore a required PHP extension for the reusable builder Library.

Drag & drop workflow

Open Library

Use the Library button in the live editor toolbar.

Choose Sections or Addons

Library items can be filtered by block type.

Drag into the page

Sections show before/after insertion lines. Addons show a highlighted container where the item will be inserted.

Drop

The insertion target is converted to a constrained CSS selector and the server stores a layout operation for that page.

Edit the new block

The inserted block can immediately be selected and edited with the same contextual inspector.

Remove when needed

Sections/Addons have a Delete action. Inserted blocks are removed from the layout layer; native theme blocks are safely hidden through a page override and can be restored from Views & Layers. Deleting an item from Library does not retroactively destroy blocks already inserted into pages.

Secure image uploads

Control	Implementation
Authorization	Authenticated administrator session required.
CSRF	Session CSRF token required on the upload request.
Formats	JPEG, PNG, WebP only. SVG is intentionally not accepted.
Type validation	Fileinfo determines the server-side MIME type; browser Content-Type is not trusted.
Decode / rewrite	GD decodes and re-encodes accepted images before publication.
Limits	Default 6 MB, max 7000×7000 px and max 24 megapixels.
Filename	Random server-generated filename; client filename is not reused.
Upload directory	An Apache hardening file is created to disable indexes and reject script-like files.

Editor icons

The live editor uses Font Awesome Free SVG icons stored locally inside payo-studio/assets/icons/. Neravo sidebar brand icons are also local SVG assets. No icon CDN is required.

Theme colors

The installer scans CSS custom properties that contain color values. The editor’s Theme Colors panel previews changes live and uses the same three actions: Cancel, Save and Save & Close.

Security model

Defense in depth: Payo Studio is hardened to reduce common attack paths, but no web application can be guaranteed to be hack-proof. Keep PHP/web-server software patched, use HTTPS, restrict administrator access, and maintain external backups.

No web editor can be promised to be “unhackable”. Payo Studio instead uses defense in depth and deliberately avoids high-risk features such as arbitrary PHP uploads or an unrestricted HTML/JavaScript code editor.

Area	Control
Passwords	PHP `password_hash()`/`password_verify()`; Argon2id when available.
Login abuse	Rate limiting/temporary lock after repeated failed attempts.
Sessions	Strict mode, cookies only, HttpOnly, SameSite=Strict, Secure on HTTPS, ID regeneration, idle and absolute timeouts.
CSRF / origin	Random session CSRF token, same-origin validation and Fetch Metadata checks on state-changing API requests when the browser sends those headers.
XSS	Plain-text editing for text nodes; server sanitization for reusable block HTML; unsafe URL schemes rejected.
Headers	Content Security Policy (including object-src none), anti-sniffing, same-origin framing/opener policy, referrer and permissions policies.
Storage	Protected storage, atomic writes and rotating JSON history.
Uploads	Allowlist + MIME inspection + image decode/re-encode + generated filenames.

These controls follow the same defensive principles documented by OWASP for session management, CSRF, XSS prevention, input validation and file uploads.

Storage format

payo-studio/
  storage/
    config.php            # credentials hash, detected pages, settings
    data/
      global.json          # global colors
      library.json         # sanitized Sections + Addons
      page-*.json          # overrides + inserted block operations
    history/               # rotating JSON history
    backups/               # HTML source backups from installation

No SQL database is required.

Server notes

Apache

payo-studio/storage/.htaccess denies browser access to editor storage. The uploads directory also receives a hardening file. Ensure Apache permits the relevant .htaccess directives.

Nginx

Nginx ignores .htaccess. Add a rule such as:

location ^~ /payo-studio/storage/ {
    deny all;
    return 403;
}

HTTPS

Use HTTPS in production. The session cookie is marked Secure automatically when HTTPS is detected.

Production deployment checklist

Use HTTPS

Do not publish administrator credentials over plain HTTP. Payo Studio automatically sets the session cookie Secure when HTTPS is detected.

Protect storage

On Apache, verify that payo-studio/storage/.htaccess is honored. On Nginx, add the deny rule from the previous section.

Keep PHP current

Use a supported PHP release and keep the web server/PHP runtime patched.

Reduce write permissions after installation

The installer needs temporary write access to connected HTML files to inject the bridge. After installation, normal edits are stored in protected JSON storage, so HTML source files can be returned to normal read-only web permissions. Keep write access only for payo-studio/storage and assets/uploads as required.

Enable DOM, Fileinfo and GD

DOM is required for reusable-block sanitization. Fileinfo + GD are required for secure image uploads; uploads fail closed when they are unavailable.

Choose a long admin password

Use a unique password/passphrase. The installer requires at least 12 characters and stores only a password hash.

Remove public installer exposure from your workflow

Complete the installer immediately after upload. Once installed, the installer redirects to the authenticated dashboard and cannot create another administrator.

Test backups

Keep an external backup in addition to Payo Studio JSON history and installation backups.

Security scope: Payo Studio is an authenticated site editor, not a multi-user CMS. Do not expose its administrator credentials to untrusted users.

Disable or remove Payo Studio

If the module has never been installed, omit the payo-studio/ folder and the HTML project is unaffected. If it was installed and you want a completely static rollback, restore the backed-up HTML pages from payo-studio/storage/backups/, then remove the editor folder.

Note: content inserted through the builder Library exists in the Payo Studio layout layer. If you permanently remove an installed editor, restore/export the desired static markup first rather than simply deleting the module.