Build Web Apps.
No
Build Step.
A high-performance JS orchestration layer that eliminates virtual DOM overhead. Decoupled, asynchronous, and remarkably clean.
System Performance Metrics
0
0
0
Key Benefits
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
| 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/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)
Quick Start
core.js works with 3 simple concepts: Pockets (DOM containers), Templates (HTML snippets), and Data (what fills them). No build step, no npm, just add a CDN link and start building.
1 Add the CDN to your HTML
Paste this in your HTML <head>:
<script src="https://cdn.jsdelivr.net/gh/Sitezip/core.sbs/core.js"></script>2 Create a Pocket
Add a pocket where your content will appear:
<div class="core-pocket" data-core-templates="greeting"></div>3 Define a Template
Create a template and bind your data:
<template name="greeting">
<h1>Hello, {{data:name}}!</h1>
</template>
<script>
core.cr.set('greeting', { name: 'World' });
core.init();
</script>✨ Complete Working Example
Copy this entire file and open it in your browser:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/Sitezip/core.sbs/core.js"></script>
</head>
<body>
<!-- This is where content appears -->
<div class="core-pocket" data-core-templates="greeting"></div>
<!-- Hidden template definition -->
<section id="cr-data" style="display:none;">
<template name="greeting">
<h1 style="color: #10b981">Hello, {{data:name}}! 👋</h1>
<p>Welcome to core.js</p>
</template>
</section>
<script>
// Set your data
core.cr.set('greeting', { name: 'Developer' });
// Initialize
core.init();
</script>
</body>
</html>🎉 That's it!
You've just built your first core.js app. The framework automatically renders templates, binds data, and handles updates. No virtual DOM, no build tools, no complexity.
Installation
CDN (Recommended)
<script src="https://cdn.jsdelivr.net/gh/Sitezip/core.sbs/core.js"></script>Local
<script src="core.js"></script>
<link rel="stylesheet" href="core.css">After including the script, call core.init() to initialize the engine.
CLI Tools & Ecosystem
Advanced
Optional development toolkit for power users
Click to expand
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.
Installation
Install via npm:
npm install -g @core.sbs/create-core-app
🚀 create-core-app
Scaffold new core.js projects with zero configuration. Interactive setup with beautiful welcome pages and auto-starting dev server.
Quick Start
create-core-app my-app
Features
- • Interactive project setup
- • Auto-starts dev server with hot reload
- • Beautiful welcome page with demos
- • Component loader included
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
core-gen card --pricing --name=procore-gen form --validation --name=contactcore-gen navbar --name=main⚡ core-dev
Development server with hot reload. Watch files and automatically refresh your browser when changes are detected.
Start Dev Server
core-dev
💻 VS Code Extension
82 code snippets for HTML and JavaScript. Accelerate development with intelligent autocomplete.
Download
Available from GitHub Releases
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.
How core.js Works
core.js is a high-performance JavaScript orchestration layer built on standard web technologies. It uses HTML attributes and native browser APIs to deliver reactive applications without virtual DOM overhead.
HTML-First Architecture
core.js leverages standard HTML attributes as the API. No special syntax, no build step, no compilation. Just add data attributes to your existing HTML and core.js handles the rest.
<div data-core-templates="userCard" data-core-source="/api/users"></div>
Pocket-Based Component System
Components are defined in <template> tags with the data-core-templates attribute. The system automatically discovers, caches, and instantiates components when data becomes available.
<template name="userCard">
<div class="user-card">
<h3>{{rec:name}}</h3>
<p>{{rec:email}}</p>
</div>
</template>
Automatic Data Binding
Data flows from APIs to templates using simple {{}} syntax. core.js handles fetching, caching, and automatic updates. No manual DOM manipulation required.
{{rec:name}} - User name
{{rec:email}} - User email
{{rec:posts.length}} - Post count
Cloner Engine for Recursive Components
The cloner engine enables nested, recursive component definitions. When data contains arrays or objects, core.js automatically clones and hydrates child components. Perfect for lists, trees, and nested data structures.
<div data-core-clone="commentList" data-core-data="comments">
<!-- Auto-cloned for each comment -->
</div>
Built-in Caching & Performance
core.js includes intelligent caching for templates and data. Requests are parallelized, responses are cached, and the system automatically invalidates and refreshes when needed. Zero configuration required.
Async-Native Rendering
Built for modern JavaScript with native async/await. No callbacks, no promises chaining. The system handles asynchronous data flow automatically while maintaining UI consistency.
// Automatic async handling
const users = await core.getData('/api/users');
// UI updates automatically when data arrives
Shadow-less Direct DOM
No virtual DOM, no diffing, no reconciliation overhead. core.js works directly with the browser's DOM for maximum performance. What you write is what gets rendered.
Performance Benefits:
✓ Zero virtual DOM overhead
✓ Instant hydration
✓ Direct DOM manipulation
✓ No diffing cost
✓ Native browser optimization
Quick Start
Add core.js to any HTML file and start building reactive components immediately.
<script src="https://cdn.jsdelivr.net/gh/Sitezip/core.sbs/core.js"></script>
<div data-core-templates="myApp" data-core-source="/api/data"></div>