Build Web Apps.
No Build
Step.
Drop-in CDN script. Zero virtual DOM. Instant hydration. Build modern applications without npm, webpack, or bundlers.
System Performance Metrics
0
0
0
0
Why Choose core.js?
| Feature | core.js | React | Vue | Svelte |
|---|---|---|---|---|
| Build Step | ❌ None | ✅ Required | ✅ Required | ✅ Required |
| Bundle Size | ~50KB | ~100KB+ | ~80KB+ | ~30KB* |
| Virtual DOM | ❌ None | ✅ Yes | ✅ Yes | ❌ Compile-time |
| Learning Curve | 🟢 Low | 🟡 Medium | 🟢 Low | 🟡 Medium |
| Setup Time | 30 seconds | 5+ minutes | 3+ minutes | 5+ minutes |
*Svelte requires compilation, core.js runs directly in browser
Lightning Fast
No virtual DOM overhead means instant updates
- • Direct DOM manipulation
- • Zero diffing cost
- • Instant hydration
Zero Dependencies
Just one script tag, no npm required
- • Drop-in CDN
- • No package.json
- • No bundlers needed
Auto-Routing
Built-in SPA routing with hash URLs
- • Hash-based navigation
- • Browser history support
- • No router library needed
Smart Caching
Data and template caching included
- • Automatic cache management
- • Configurable TTL
- • Parallel fetching
Start Building in Seconds
No setup, no configuration, no build tools. Just add one script tag and you're ready to build modern web applications.
<script src="https://cdn.jsdelivr.net/gh/Sitezip/core.sbs/core.js"></script>
Architecture Overview
core.js delivers a Shadow-less Rendering engine that treats the DOM as the state tree, eliminating virtual DOM diffing overhead.
Its Async-Native architecture fetches data and
templates in parallel using modern async/await
patterns.
The built-in Cloner Engine enables nested, recursive component definitions that hydrate automatically on data insertion.
Lifecycle Hooks
-
→
core.ud.preflightModify fetch settings before a request
-
→
core.ud.postflightTransform response data after fetch
-
→
core.ud.prepaintAdjust data before rendering
-
→
core.ud.postpaintRun logic after template is rendered
<template name="userCard">
<div class="user-card">
<h3>{{rec:name}}</h3>
<p>{{rec:email}}</p>
</div>
</template><div class="core-pocket"
data-core-templates="userCard"
data-core-source-users="https://api.example.com/users">
</div><!-- Format as money -->
{{rec:price:money:$}}
<!-- Recursive cloning -->
{{rec:items:core_pk_cloner:itemTemplate}}Silent Calls
Use target="core_be_getData"
to fetch data or templates without immediate UI updates.
Low
Reflows∞
ScalabilityReal-Time
State Demo
Live Counter
0
Clicks
Tracked
Controls
Using core.js registry for real-time state management
Live Counter
Controls
The Logic Bridge
core.js automatically manages the serialization of your state directly into the DOM, allowing for instant "resurrection" of UI components without virtual DOM overhead.
Fetch in progress...
— System ArchitectFetch in progress...
Create Your Profile
Enter your info to generate a profile page.
Profile Details
Profile Management
Scammer News
Breaking updates from the underground network.
{{rec:title}}
{{rec:description}}
Component Registry
0
0
0
0
| Dev ID | Interface | Sync Status | Action |
|---|---|---|---|
| #{{aug:count}} | {{rec:firstName}} {{rec:lastName}} | ACTIVE | Pocket Source |
{{rec:title}}
core.js Manual
Create Once, Render Everywhere — Orchestration without Overhead.
00 Installation
Choose your preferred CDN option. No build tools required.
CDN Options
<!-- Option A: Production version via CDN -->
<script src="https://cdn.jsdelivr.net/gh/Sitezip/core.sbs/core.js"></script>
<!-- Option B: Historical version via CDN (advised) -->
<script src="https://cdn.jsdelivr.net/gh/Sitezip/core.sbs@20251212.0/core.js"></script>
<!-- Option C: Production -->
<script src="https://core.sbs/core.js"></script>01 Quick Start
core.js is dependency-free. Just import the script and start defining pockets of logic in your HTML.
1. Define a Template
Templates and data live inside a hidden cr-data
section.
<section id="cr-data" style="display:none;">
<template name="users">
<div class="user-card">
<h3>{{rec:name}}</h3>
<p>{{rec:email}}</p>
</div>
</template>
</section>2. Create a Pocket
Pockets are insertion points that fetch their own data.
<div class="core-pocket"
data-core-templates="users"
data-core-source-users="api/v1/users">
</div>02 Attributes Reference
| Attribute | Target | Description |
|---|---|---|
| data-core-templates | Element / Anchor | Comma-separated list of templates to render. |
| data-core-source | Element / Clone | URL or JSON string for the primary data source. |
| data-core-data | Clone / Silent | A custom reference name for the fetched data. |
| data-[name]-core-source | Element / Anchor | A specific data source for a named template in the stack. |
03 Data Referencing
Syntax: {{type:ref:format:clue}}
Token Types
-
rec:
Reference to a member of the current record being cloned.
-
aug:
Augmented runtime values (index, count, custom strings).
-
data:
Global reference to any cached data source in the registry.
Advanced Digging
// Deep object traversal
{{rec:customer.shipping.address.city}}
// Array index and listing
{{rec:tags.1}} // Index 1
Formatting & PipingStandard
- money:$
- date / date-time
- upper / lower
- upperfirst
- truncate:n
Structural
- core_pk_cloner:name
- core_pk_attr:attrName
- linkify / urllink
- emaillink
- imgsrc
Piping (Expert)
Chain multiple formats using the pipe
|
delimiter.
05 Lifecycle Hooks
The core.ud (User Defined)
registry allows you to intercept every stage of the orchestration.
Augmentation Hooks
core.ud.cloneValue(record, args)
Invoked by
{{aug:value}} during cloning to return custom dynamic values
based on the record.
core.ud.cloneString(record, args)
Invoked by
{{aug:string}}. Allows raw manipulation of the template string
before it's injected.
core.ud.getTemplate(name, templateStr)
Modify fetched templates <!-- defining data/template silent request --> <button class="nav-link" data-target="core_be_getData" data-core="silent" data-core-source-silent="https://dummyjson.com/products?limit=1"> Silent Data</button> <button class="nav-link" data-target="core_be_getTemplate" data-core="author" data-core-source-author="/html/author.html"> Silent Template</button>
copy(text)
Copy to clipboard with invisible textarea fallback.
uuid()
Generate a compliant v4-like unique identifier.
sortObj(arr, key)
High-performance object array sorting (ASC/DESC).
digData(obj, ref)
The engine's internal recursive digging logic.
date(str, format)
Versatile date formatter with TS/ISO/PERF tokens.
Expert Mode: Silent Orchestration
Static anchor tags can trigger background syncs without any UI flicker or state transition.
// Silent Data Fetching
<a href="#"
target="core_be_getData"
data-core-data="globalStore"
data-core-source="api/data">
Background Sync
</a>Internal Memory Access
Access `core.be.fetchLogFIFO` to view every network request's history and configuration.
Direct Registry Storage
Manually push data to specific storage layers (DOM, dataset, or session) via `core.cr.setData`.
Core Cheatsheet
Quick logic snippets and implementation patterns for power users.
01 Navigation Links
<button data-core="other"
data-target="#main">Navigate</button>Defining a specific viewhost (target) and template chain.
02 Process Formatting
{{rec:email:emaillink:class="link"}}
{{rec:thumbnail:imgsrc:class="img"}}
{{rec:price:money:$}}
{{rec:name:upper}}
Formatting tokens: money, date, upper, lower, linkify, imgsrc.
03 Advanced Logic & Lifecycle
JavaScript Hooks
core.ud.preflight = (ref, src, type) => {
return {dataRef: ref, dataSrc: src};
}
core.ud.postflight = (ref, obj, type) => {
return obj;
}Recursive Cloning
// Recursive cloner pattern
{{rec:items:core_pk_cloner:colors}}Allows for infinite nesting of data structures (e.g. tree views, threaded comments).
Recursive Logic Chains
Infinite nesting with recursive data patterns
Create infinitely nested data structures with recursive templates and logic chains. Perfect for tree views, nested comments, hierarchical data displays like org charts, file explorers, nested menus, collapsible content, interactive dashboards, dynamic content hierarchies, nested UI components, complex nested data visualizations, and deeply nested logical expressions.
{{rec:hex}}
{{rec:rgb}}
core.js Documentation
A lightweight, client-side rendering and state management library designed to facilitate the decoupling of data, templates, and DOM logic through modern asynchronous patterns.
Shadow-less Rendering
No virtual DOM overhead
Async-Native
Promise-based architecture
Pocket-based
Component architecture
Zero Dependencies
Vanilla JavaScript only
Technical Overview
core.js operates on a lifecycle-driven approach, identifying specific "pockets" in the DOM and populating them with hydrated templates. It provides a robust suite of utility functions for data validation, formatting, and backend synchronization.
Key Architectural Pillars
-
•
Pockets (`core-pocket`): Container elements that act as dynamic insertion points
-
•
Clones (`core-clone`): Template structures duplicated for each dataset record
-
•
Registry (`core.cr`): Centralized storage with multiple persistence levels
-
•
Async Lifecycle: Linear promise-based flow ensuring data integrity
Lifecycle Flow
soc() - Start of Call
getTemplate() - Batch template requests
getData() - Batch data requests
eoc() - End of Call (cleanup)
Installation
CDN Installation
<!-- Production version -->
<script src="https://core.sbs/core.js"></script>
<!-- Specific version (recommended) -->
<script src="https://cdn.jsdelivr.net/gh/Sitezip/core.sbs@20251212.0/core.js"></script>Local Installation
<script src="core.js"></script>
<link rel="stylesheet" href="core.css">🚀 Quick Start
After installation, simply call core.init() to initialize the engine.
Quick Start
1 Define a Template
<section id="cr-data" style="display:none;">
<template name="userprofile">
<div class="profile-card">
<h1>{{data:userprofile:name}}</h1>
<div class="core-clone" data-core-data="userprofile:posts">
<p>{{rec:title}}</p>
</div>
</div>
</template>
</section>2 Create a Pocket
<div class="core-pocket"
data-core-templates="userprofile"
data-userprofile-core-source="/api/user/123">
</div>3 Initialize
<script>
core.init();
</script>🎉 That's it!
core.js will automatically fetch the data and render your template. No additional JavaScript required!
CLI Tools & Ecosystem
core.js comes with a complete development toolkit to accelerate your workflow. From project scaffolding to component generation and hot-reload development servers - everything you need to build modern web applications.
🚀 create-core-app
Scaffold new core.js projects with zero configuration. Interactive setup with beautiful welcome pages and auto-starting dev server.
Quick Start
npx @core-js/create-core-app my-app
Features
- • Interactive project setup
- • Auto-starts dev server with hot reload
- • Beautiful welcome page with demos
- • Component loader included
- • Optional routing configuration
What You Get
- • Live framework metrics
- • Interactive examples
- • Pre-configured setup
- • Getting started guide
🎨 core-gen
Generate pre-built, production-ready components. 23 component types covering forms, tables, modals, navigation, and more.
Usage
npx @core-js/gen card --pricing --name=pronpx @core-js/gen form --validation --name=contactnpx @core-js/gen navbar --name=mainUI Components
- • Cards (basic, pricing)
- • Buttons & Badges
- • Avatars & Spinners
- • Progress bars
- • Skeleton loaders
Interactive
- • Modals & Dropdowns
- • Tabs & Accordions
- • Tooltips & Toasts
- • Forms with validation
- • Data tables
Navigation
- • Navbar (responsive)
- • Breadcrumbs
- • Pagination
- • Search bars
- • Footers
23 components total - All styled, functional, and ready to use. No build step required.
⚡ core-dev
Development server with hot reload. Watch files and automatically refresh your browser when changes are detected.
Start Dev Server
npx @core-js/dev
Features
- • Static file server
- • Hot reload on file changes
- • WebSocket-based updates
- • Zero configuration
- • Custom port support
No Build Step
- • Serves files as-is
- • No compilation needed
- • No bundling required
- • Pure file serving
💻 VS Code Extension
82 code snippets for HTML and JavaScript. Accelerate development with intelligent autocomplete for pockets, templates, clones, and more.
Download
Available from GitHub Releases
Pockets, templates, clones, components
Lifecycle hooks, API calls, utilities
Subsystem Documentation
1. Backend (`core.be`)
Handles all external I/O using the Fetch API with built-in promise tracking to prevent race conditions.
Core Methods
getData(dataRef, dataSrc, settings)- Retrieves JSON datagetTemplate(dataRef, dataSrc, settings)- Retrieves HTML templatesawaitAll()- Global synchronization method
Features
- • TTL-based caching for data and templates
- • Promise tracking to prevent race conditions
- • Automatic request batching
2. Registry (`core.cr`)
Manages the internal state of the application with multiple storage tiers.
Storage Tiers
Core Methods
setData(name, data, elem, storageId)- Store datagetTemplate(name)- Retrieve and hydrate template
3. Pocket Lifecycle (`core.pk`)
The core engine responsible for DOM manipulation and rendering.
Lifecycle Methods
soc()- Start of Call, awaits backend requestsgetTemplate()- Batches template requestsaddTemplate()- Injects static templatesgetData()- Batches data requestsaddData()- Performs cloning and hydrationeoc()- End of Call, cleanup and formatting
Template Directives
Double Curly Syntax:
{{type:source:reference:format}}
data: - Global registry lookuprec: - Current record lookupaug: - Augmented metadata (index, count)
4. Validation & Scrubbing (`core.sv`)
Comprehensive validation engine for data sanitization and formatting.
Core Methods
scrub(scrubArr)- Validate input objectsformat(value, formatStr)- Transform data
Validation Rules
- •
req- Required field - •
email- Email validation - •
url- URL validation - •
min/max- Length/range validation
5. Helper Functions (`core.hf`)
Utility methods for common operations.
digData(object, path)- Deep-seek values in nested JSONdate(dateStr, format)- Robust date formattinghydrateByClass()- Mass-hydration by CSS classformatByClass()- Mass-formatting by CSS class
Configuration & Hooks
Extend the engine's behavior by defining hooks in the core.ud (User Defined) namespace.
| Hook | Description |
|---|---|
soc() |
Executed before the rendering lifecycle begins |
eoc() |
Executed after rendering lifecycle and DOM updates are complete |
preflight() |
Intercepts backend requests before they are dispatched |
postflight() |
Processes backend responses before they are committed to the registry |
prepaint() |
Executed before a specific template or data block is injected |
postpaint() |
Executed after injection and cloner execution |
Global Settings
core.useDebugger- Enable verbose console loggingcore.useRouting- Enable URL hash-based state persistencecore.baseUrl- Define root path for dynamic module imports
Example Configuration
core.ud.init = () => {
core.useDebugger = window.location.hostname === 'localhost';
core.useRouting = true;
core.baseUrl = '/modules';
};Data Referencing
Syntax:
{{type:object-member:format:clue}}
Common Examples
| Syntax | Description |
|---|---|
{{rec:name}} |
Simple property access |
{{data:userprofile:name}} |
Global registry lookup |
{{rec:balance:money:$}} |
Currency formatting with dollar sign |
{{rec:status:upper}} |
Uppercase transformation |
{{rec:email:emaillink}} |
Email link generation |
{{rec:url:urllink}} |
URL link generation |
{{rec:image:imgsrc}} |
Image source attribute |
{{rec:customer.address.city}} |
Nested property access |
{{rec:items:core_pk_cloner:item}} |
Array cloning with template |
{{aug:index}} |
Current record index in clone loop |
{{aug:count}} |
Total number of records |
Attributes Reference
| Attribute | Description | Example |
|---|---|---|
data-core-templates |
Template names to load | data-core-templates="user,profile" |
data-core-source |
Default data source URL | data-core-source="/api/user" |
data-core-source-[name] |
Template-specific source | data-core-source-profile="/api/profile" |
data-core-data |
Data reference for clones | data-core-data="users:posts" |
API Reference
Core Methods
| Method | Description | Example |
|---|---|---|
core.init() |
Initialize the engine | core.init() |
core.cr.setData(name, data) |
Store data in registry | core.cr.setData('user', {name: 'John'}) |
core.cr.getData(name) |
Retrieve data from registry | const user = core.cr.getData('user') |
core.be.getData(ref, src) |
Fetch data from URL | core.be.getData('users', '/api/users') |
core.be.awaitAll() |
Wait for all requests to complete | await core.be.awaitAll() |
Security Considerations
Sanitization
core.js provides nohtml
and removehtml scrubbers. Apply these to
user-generated content before injection.
{{rec:userInput:nohtml}}Data Exposure
Storage ID 1 (Static)
exposes data in the DOM. Use Storage ID 0 (DOM) for
sensitive state data.
core.cr.setData('sensitive', data, elem, 0)Examples
Basic User Card
<section id="cr-data" style="display:none;">
<template name="users">
<div class="user-card">
<h3>{{rec:name}}</h3>
<p>{{rec:email}}</p>
</div>
</template>
</section>
<div class="core-pocket"
data-core-templates="users"
data-core-source-users="api/v1/users">
</div>Product List with Formatting
<section id="cr-data" style="display:none;">
<template name="productList">
<div class="product">
<h3>{{rec:title}}</h3>
<p>{{rec:description}}</p>
<div class="price">{{rec:price:money:$}}</div>
</div>
</template>
</section>
<div class="core-pocket"
data-core-templates="productList"
data-core-source-productList="https://fakestoreapi.com/products">
Loading products...
</div>Recursive Data Cloning
<section id="cr-data" style="display:none;">
<template name="colors">
<div class="color-item">
<span>{{rec:name:upper}}</span>
<span>{{rec:value}}</span>
<div>{{rec:children:core_pk_cloner:colors}}</div>
</div>
</template>
</section>
<div class="core-clone"
data-core-source="https://api.example.com/colors">
<div class="color-item">
<span>{{rec:name:upper}}</span>
<span>{{rec:value}}</span>
<div>{{rec:children:core_pk_cloner:colors}}</div>
</div>
</div>Advanced Data Formatting
<section id="cr-data" style="display:none;">
<template name="transaction">
<div class="transaction">
<span class="user">{{rec:name:upper}}</span>
paid
<span class="amount">{{rec:paid:money:$}}</span>
on
<span class="date">{{rec:ts:date:date}}</span>
for
<span class="item">{{rec:stuff.food}}</span>
<div class="details">
{{rec:more:core_pk_cloner:details}}
</div>
</div>
</template>
</section>
<div class="core-clone"
data-core-source="https://dummyjson.com/products?limit=1">
<div class="transaction">
<span class="user">{{rec:name:upper}}</span>
paid
<span class="amount">{{rec:paid:money:$}}</span>
on
<span class="date">{{rec:ts:date:date}}</span>
for
<span class="item">{{rec:stuff.food}}</span>
<div class="details">
{{rec:more:core_pk_cloner:details}}
</div>
</div>
</div>Multiple Data Sources
<section id="cr-data" style="display:none;">
<template name="userProfile">
<h2>{{rec:name}}</h2>
<p>{{rec:email}}</p>
<div class="orders">
{{rec:orders:core_pk_cloner:orderItem}}
</div>
</template>
<template name="orderItem">
<div class="order">
<span>{{rec:product}}</span>
<span>{{rec:price:money:$}}</span>
</div>
</template>
</section>
<div class="core-pocket"
data-core-templates="userProfile"
data-core-source-userProfile="api/v1/users/123"
data-core-source-orderItem="api/v1/orders">
</div>🚀 Try it yourself!
Copy these code examples into your HTML file and watch core.js work its magic!
MIT License
Copyright (c) 2025 CORE_ORCHESTRATOR
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
core.js Philosophy
core.js is a small, honest UI runtime. It exists to ship real software, not to grow a framework ecosystem.
Ship Early. Stay Honest.
We ship usable software as soon as it’s real. Not perfect. Not overdesigned. Not wrapped in roadmap theater. If it exists, it runs. If it runs, it ships.
No Regressions Is the Rule
New ideas are welcome. Breaking working applications is not. If something breaks: it’s a bug, it gets fixed quickly, or it gets reverted. Stability is earned through discipline, not promises.
Upstream First, Always
Fixes belong in the core. Not in forks, not in wrappers, and not in project-specific hacks. If something requires a workaround, the core is wrong. We fix the core.
Small Surface Area Over Clever Abstractions
Every API has a cost. Every layer is a liability. We prefer fewer concepts, explicit behavior, and boring primitives that compose well. If it can’t be explained quickly, it doesn’t belong.
Real Usage Is the Test Suite
We don’t design in isolation. core.js is used to build real applications. Feedback comes from production, constraints, and mistakes—not hypotheticals.
Opinionated, Not Bloated
core.js is not everything for everyone. It does one job well and stays out of your way. If you want magic, indirection, or framework gravity, React already exists.
Respect the Runtime
The browser is the platform. JavaScript is the contract. We don’t fight the environment. We work with it.
What core.js Is Not
- × A dependency magnet
- × A platform play
- × A social experiment
- × A rewrite-everything framework