ZeroCode.js - Web Components CMS Editor Library

Key Features

No Dependencies, No Side Effects

Web Components with Shadow DOM completely isolate CSS/JS. No impact on your existing admin panels, and your existing CSS/JS won't affect ZeroCode.js. Safe to integrate with Vue/React/Laravel or any framework.

Low Learning Curve

Built on Web Components standard - if you know HTML/CSS/JS basics, you can understand it. While Vue 3 is used internally, we provide a framework-agnostic API, so no Vue knowledge required. Flexible content management with our custom template syntax.

Intuitive Operation

Click-based CMS anyone can use. No drag & drop needed - edit, add, delete, and reorder with simple clicks. Visual feedback shows currently selected elements, making operations clear and easy to understand.

Architecture

ZeroCode.js handles frontend only

Backend

Data Management & API

→

ZeroCodeCMS

User-facing Admin Panel

Edit / Add / Delete / Reorder

ZeroCodeEditor

For Engineers & Designers

Parts & Image Management

←

Save Request

Returns Data

ZeroCode.js is a frontend library - backend implementation is handled by the caller

Why Choose ZeroCode.js?

Perfect for integrating with existing systems without framework lock-in

Integrate with Existing Systems

Shadow DOM ensures no CSS/JS conflicts with your existing system. Simply add as a Web Component to your existing Laravel admin, React, or Vue app to get CMS functionality. Use your existing authentication and database as-is.

No Framework Lock-in

Built on Web Components standard - works with Vue/React/Laravel or any environment. Our framework-agnostic API lets you keep your existing tech stack. No need to learn a new framework - basic HTML/CSS/JS knowledge is enough.

Frontend-Only Solution

As a frontend-only library, you can leverage your existing backend. No server setup or maintenance overhead - just connect to your existing backend API for instant CMS functionality. Lighter and easier to adopt than full-stack CMSs.

Try the Demo

Three-tier responsibility separation with minimal dependencies

Development

Engineer Admin Panel (Dev)

Admin panel for developers and designers. All features available.

Parts Management
Image Management
Data Viewer

<zcode-editor></zcode-editor>

Try Demo (Interactive) →

💡 Try all features (including Parts & Image management)

→

User-facing

User Admin Panel (CMS)

Admin panel for content editors. Editing features available.

Edit / Add / Delete / Reorder
No Parts Management
No Image Management

<zcode-cms></zcode-cms>

Try Demo (Interactive) →

💡 Click to edit, add, or delete content

→

Production

Public Output (Pub)

Server-side rendering only. Generates HTML strings.

HTML String Generation Only
No Editing Features
Lightweight, No Side Effects

renderToHtml(data)

Open Demo

Quick Start

Get Started

<!DOCTYPE html>

                <html>

                <head>

                  <link rel="stylesheet"
                href="https://unpkg.com/zerocodejs/dist/zerocodejs.css">

                </head>

                <body>

                  <zcode-editor locale="en"></zcode-editor>

                

                  <script
                src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

                  <script
                src="https://unpkg.com/zerocodejs/dist/zerocode.umd.js"></script>

                </body>

                </html>

npm install zerocodejs

                

                <!-- index.html -->

                <link rel="stylesheet" href="node_modules/zerocodejs/dist/zerocodejs.css">

                <zcode-editor locale="en"></zcode-editor>

                <script type="module">

                  import 'zerocodejs';

                </script>

import 'zerocodejs';

                import 'zerocodejs/style.css';

                

                function App() {

                  return <zcode-editor locale="en" />;

                }

<template>

                  <zcode-editor locale="en" />

                </template>

                

                <script setup>

                import 'zerocodejs';

                import 'zerocodejs/style.css';

                </script>

Documentation

For detailed usage and API reference,
please see the documentation page

View Documentation