1<!DOCTYPE html><html class="default" lang="en" data-base="./"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>@nkeff/cardboard-js</title><meta name="description" content="Documentation for @nkeff/cardboard-js"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/>
1<script defer src="assets/main.js"></script>
1<script async src="assets/icons.js" id="tsd-icons-script"></script>
1<script async src="assets/search.js" id="tsd-search-script"></script>
1<script async src="assets/navigation.js" id="tsd-nav-script"></script>
1<script async src="assets/hierarchy.js" id="tsd-hierarchy-script"></script>
1</head><body>
1<script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script>
1<header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="index.html" class="title">@nkeff/cardboard-js</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>@nkeff/cardboard-js</h1></div><div class="tsd-panel tsd-typography"><h2 id="ð¦-carboardjs" class="tsd-anchor-link">ð¦ Carboard.js<a href="#ð¦-carboardjs" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p><img src="media/header-img.png" alt=""></p> 2<p><a href="https://github.com/nombrekeff/cardboard-js/actions/workflows/test_main.yml"><img src="https://github.com/nombrekeff/cardboard-js/actions/workflows/test_main.yml/badge.svg?branch=main&event=push" alt="Tests Main"></a> 3<a href="https://github.com/nombrekeff/cardboard-js/milestone/1"><img src="https://img.shields.io/badge/Project_Status-WIP-orange" alt="Project Status"></a> 4<a href="https://sonarcloud.io/summary/new_code?id=nombrekeff_cardboard-js"><img src="https://sonarcloud.io/api/project_badges/measure?project=nombrekeff_cardboard-js&metric=alert_status" alt="SonarQube Status"></a> 5<a href="https://github.com/nombrekeff/cardboard-js/milestone/1"><img src="https://img.shields.io/badge/Bundle_Size-16.6kb-blue" alt="Bundle Size"></a></p> 6<p><a href="https://www.producthunt.com/products/cardboard-beta?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-cardboard-js-web-apps-flat-packed" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=985873&theme=light&t=1765897584695" alt="Cardboard.js: Web apps, flat-packed - Web UIs, unboxed. The library for when you've had enough.  | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a></p> 7<p><strong>Cardboard.js: The lo-fi of UI libraries -- <em>build web apps without HTML, or JSX!</em></strong> This lightweight (<em>around 16kb</em>), performant library lets you manage state, components, and logic using just JavaScript/TypeScript. Ideal for projects where simplicity and speed are key.</p> 8<p>It's similar in philosophy to <a href="https://vanjs.org/">VanJS</a>, but with many more features and a more extensive API.</p> 9<blockquote> 10<p><strong>!NOTE!</strong>: Cardboard is <a href="https://github.com/nombrekeff/cardboard-js/wiki/Project-Status">in development</a>, it is stable, but use with caution.<br> 11You can check the <a href="https://github.com/nombrekeff/cardboard-js/milestone/1">v1.0.0 milestone</a> for a view on the development state - <strong>help is much appreciated!</strong></p> 12</blockquote> 13<pre><code class="ts"><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-2">Counter</span><span class="hl-1"> = () </span><span class="hl-0">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-3">count</span><span class="hl-1">
13 = </span><span class="hl-2">state</span><span class="hl-1">(</span><span class="hl-4">0</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-5">return</span><span class="hl-1"> </span><span class="hl-2">button</span><span class="hl-1">()</span><br/><span class="hl-1"> .</span><span class="hl-2">text</span><span class="hl-1">(</span><span class="hl-6">`Clicked $count times`</span><span class="hl-1">, { </span><span class="hl-7">count</span><span class="hl-1"> })</span><br/><span class="hl-1"> .</span><span class="hl-2">addStyle</span><span class="hl-1">(</span><span class="hl-6">'color'</span><span class="hl-1">, </span><span class="hl-6">'gray'</span><span class="hl-1">)</span><br/><span class="hl-1"> .</span><span class="hl-2">stylesIf</span><span class="hl-1">(</span><span class="hl-7">count</span><span class="hl-1">.</span><span class="hl-2">greaterThan</span><span class="hl-1">(</span><span class="hl-4">5</span><span class="hl-1">), { </span><span class="hl-7">color:</span><span class="hl-1"> </span><span class="hl-6">'red'</span><span class="hl-1"> }) </span><span class="hl-8">// If count > 5, it will make the color red</span><br/><span class="hl-1"> .</span><span class="hl-2">clicked</span><span class="hl-1">((</span><span class="hl-7">_</span><span class="hl-1">) </span><span class="hl-0">=></span><span class="hl-1"> </span><span class="hl-7">count</span><span class="hl-1">.</span><span class="hl-7">value</span><span class="hl-1">++);</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-8">// Counter will be added to the body</span><br/><span class="hl-2">tag</span><span class="hl-1">(</span><span class="hl-6">'(body)'</span><span class="hl-1">).</span><span class="hl-2">append</span><span class="hl-1">(</span><span class="hl-2">Counter</span><span class="hl-1">());</span> 14</code><button type="button">Copy</button></pre> 15 16<h4 id="ð¸-getting-started---for-a-getting-started-guide" class="tsd-anchor-link">ð¸ <a href="https://github.com/nombrekeff/cardboard-js/wiki/Getting-Started">Getting Started</a> - for a getting started guide.<a href="#ð¸-getting-started---for-a-getting-started-guide" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><h4 id="ð¸-wiki---for-human-documentation-and-examples" class="tsd-anchor-link">ð¸ <a href="https://github.com/nombrekeff/cardboard-js/wiki/Examples">Wiki</a> - for human documentation, and examples.<a href="#ð¸-wiki---for-human-documentation-and-examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><h4 id="ð¸-deepwiki---ai-generated-docs-using-deepwiki" class="tsd-anchor-link">ð¸ <a href="https://deepwiki.com/nombrekeff/cardboard-js/1-overview">Deepwiki</a> - ai generated docs using deepwiki<a href="#ð¸-deepwiki---ai-generated-docs-using-deepwiki" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><h4 id="ð¸-documentation---for-technical-docs" class="tsd-anchor-link">ð¸ <a href="https://nombrekeff.github.io/cardboard-js/">Documentation</a> - for technical docs.<a href="#ð¸-documentation---for-technical-docs" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><h3 id="setup" class="tsd-anchor-link">Setup<a href="#setup" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p><a href="https://github.com/new?template_name=cardboard-js-template&template_owner=nombrekeff"><img src="https://img.shields.io/badge/Clone_Template-blue" alt="Clone Template"></a></p> 17<h4 id="install" class="tsd-anchor-link">Install<a href="#install" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code><span class="hl-7">npm</span><span class="hl-1"> </span><span class="hl-7">install</span><span class="hl-1"> @</span><span class="hl-7">nkeff</span><span class="hl-1">/</span><span class="hl-7">cardboard</span><span class="hl-1">-</span><span class="hl-7">js</span> 18</code><button>
18Copy</button></pre> 19 20<h4 id="setup-1" class="tsd-anchor-link">Setup<a href="#setup-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="ts"><span class="hl-5">import</span><span class="hl-1"> { </span><span class="hl-7">tag</span><span class="hl-1">, </span><span class="hl-7">init</span><span class="hl-1">, </span><span class="hl-7">allTags</span><span class="hl-1"> } </span><span class="hl-5">from</span><span class="hl-1"> </span><span class="hl-6">'@nkeff/cardboard-js'</span><span class="hl-1">;</span><br/><br/><span class="hl-0">const</span><span class="hl-1"> { </span><span class="hl-3">div</span><span class="hl-1">, </span><span class="hl-3">p</span><span class="hl-1">, </span><span class="hl-3">span</span><span class="hl-1">, </span><span class="hl-3">ul</span><span class="hl-1"> } = </span><span class="hl-7">allTags</span><span class="hl-1">;</span><br/><br/><span class="hl-8">// Initialize and get access to the root tag ('body' by default)</span><br/><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-3">body</span><span class="hl-1"> = </span><span class="hl-2">init</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// Add tags to the body</span><br/><span class="hl-7">body</span><span class="hl-1">.</span><span class="hl-2">append</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-2">div</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-2">p</span><span class="hl-1">(</span><span class="hl-6">'Hello world!'</span><span class="hl-1">)</span><br/><span class="hl-1"> )</span><br/><span class="hl-1">);</span> 21</code><button type="button">Copy</button></pre> 22 23<h4 id="single-file-script" class="tsd-anchor-link">Single file script<a href="#single-file-script" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><p>If you want to add it to your site and start using Cardboard, you can import the bundle file:</p> 24<p><strong>Global import:</strong></p> 25<pre><code class="html"><span class="hl-9"><</span><span class="hl-10">script</span><span class="hl-11"> </span><span class="hl-12">src</span><span class="hl-11">=</span><span class="hl-13">"node_modules/@nkeff/cardboard-js/dist/cardboard.global.js"</span><span class="hl-9">></</span><span class="hl-10">script</span><span class="hl-9">></span><br/><span class="hl-8"><!-- Or using a CDN --></span><br/><span class="hl-9"><</span><span class="hl-10">script</span><span class="hl-11"> </span><span class="hl-12">src</span><span class="hl-11">=</span><span class="hl-13">"https://cdn.jsdelivr.net/npm/@nkeff/cardboard-js/dist/cardboard.global.js"</span><span class="hl-9">></</span><span class="hl-10">script</span><span class="hl-9">></span><br/><span class="hl-9"><</span><span class="hl-10">script</span><span class="hl-9">></span><br/><span class="hl-0">const</span><span class="hl-11"> { </span><span class="hl-3">div</span><span class="hl-11">, </span><span class="hl-3">p</span><span class="hl-11"> } </span><span class="hl-1">=</span><span class="hl-11"> </span><span class="hl-7">Carboard</span><span class="hl-11">.</span><span class="hl-7">allTags</span><span class="hl-11">;</span><br/><span class="hl-9"></</span><span class="hl-10">script</span><span class="hl-9">></span> 26</code><button type="button">Copy</button></pre> 27 28<p><strong>ESM import:</strong></p> 29<pre><code class="html"><span class="hl-9"><</span><span class="hl-10">script</span><span class="hl-9">></span><br/><span class="hl-11"> </span><span class="hl-5">import</span><span class="hl-11"> { </span><span class="hl-7">tag</span><span class="hl-11">, </span><span class="hl-7">init</span><span class="hl-11">, </span><span class="hl-7">allTags</span><span class="hl-11">, </span><span class="hl-7">p</span><span class="hl-11"> } </span><span class="hl-5">from</span><span class="hl-11"> </span><span class="hl-6">'https://cdn.jsdelivr.net/npm/@nkeff/cardboard-js/dist/cardboard.js'</span><span class="hl-11">;</span><br/><span class="hl-11"> </span><span class="hl-0">const</span><span class="hl-11"> { </span><span class="hl-3">div</span><span class="hl-11">, </span><span class="hl-3">p</span><span class="hl-11"> } </span><span class="hl-1">=</span><span class="hl-11"> </span><span class="hl-7">allTags</span><span class="hl-11">;</span><br/><span class="hl-9"></</span><span class="hl-10">script</span><span class="hl-9">></span> 30</code><button type="button">Copy</button></pre> 31 32<h3 id="what-does-it-do" class="tsd-anchor-link">What does it do?<a href="#what-does-it-do" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Cardboard.js lets you create web apps using only JavaScript/TypeScript, eliminating the need for HTML, CSS, or JSX. Write code that directly represents your HTML, CSS, state, and logic.
32</p> 33<p><strong>Key features:</strong></p> 34<ul> 35<li><strong><a href="https://github.com/nombrekeff/cardboard-js/wiki/Tags">NO HTML</a></strong>: Create any HTML element with Cardboard.</li> 36<li><strong><a href="https://github.com/nombrekeff/cardboard-js/wiki/State">State</a></strong>: Built-in reactive state management.</li> 37<li><strong><a href="https://github.com/nombrekeff/cardboard-js/wiki/Manipulating-Tags">Manipulation</a></strong>: Easily manipulate HTML properties based on state.</li> 38<li><strong><a href="https://github.com/nombrekeff/cardboard-js/wiki/Logic">Logic</a></strong>: Add application logic in a simple way.</li> 39<li><strong><a href="https://github.com/nombrekeff/cardboard-js/wiki/Text-Templates">Text Templates</a></strong>: Simplify text and template manipulation with state.</li> 40<li><strong><a href="https://github.com/nombrekeff/cardboard-js/wiki/Reusable-Component">Components</a></strong>: Create reusable UI components.</li> 41<li><strong><a href="https://github.com/nombrekeff/cardboard-js/wiki/Styling">CSS in JS</a></strong>: Style your application using JavaScript objects.</li> 42<li><strong>Typed</strong>: Full TypeScript support for code completion and type safety.</li> 43<li><strong>ATAP</strong>: As tested as possible!</li> 44</ul> 45<hr> 46<blockquote> 47<p>NOTE: There's also a server-side alternative to <strong>Cardboard</strong> I've also written, called <a href="https://github.com/nombrekeff/hobo-js"><strong>Hobo</strong></a>. In case you need something similar to Cardboard that works server-side! 48I'm planning to make Cardboard work server-side as well in v2.0.0. So you can look forward to that, or help out!</p> 49</blockquote> 50<hr> 51<h3 id="whos-this-for" class="tsd-anchor-link">Who's this for?<a href="#whos-this-for" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>If you don't like writing HTML, CSS, or JSX, or need a lightweight framework for performant web apps, Cardboard.js might be for you. Build anything from static pages to advanced applications with a small footprint. Let me know if it's missing something you need!</p> 52<h3 id="contributing" class="tsd-anchor-link">Contributing<a href="#contributing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Well, hello! I'm always open for help on projects, and this one in particular! If you find the project interesting, useful, fun, or you feel some other kind of emotion, and that emotion inclines you to maybe consider helping out, that'd be great!</p> 53<p>You can help with the Wiki, using and testing the project, reporting bugs, fixing bugs, adding features, etc... Just remember to leave an issue if the change is big or changes some core concept of cardboard.</p> 54<p>Take a look at these guides:</p> 55<ul> 56<li><a href="https://github.com/nombrekeff/cardboard-js/wiki/Development-Guide">Development Project Setup</a></li> 57<li><a href="https://github.com/nombrekeff/cardboard-js/wiki/Contributing-Guide">Contributing Guide</a></li> 58</ul> 59</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>
59External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#ð¦-carboardjs"><span>ð¦ <wbr/>Carboard.js</span></a><ul><li><ul><li><a href="#ð¸-getting-started---for-a-getting-started-guide"><span>ð¸ <wbr/>Getting <wbr/>Started -<wbr/> for a getting started guide.</span></a></li><li><a href="#ð¸-wiki---for-human-documentation-and-examples"><span>ð¸ <wbr/>Wiki -<wbr/> for human documentation, and examples.</span></a></li><li><a href="#ð¸-deepwiki---ai-generated-docs-using-deepwiki"><span>ð¸ <wbr/>Deepwiki -<wbr/> ai generated docs using deepwiki</span></a></li><li><a href="#ð¸-documentation---for-technical-docs"><span>ð¸ <wbr/>Documentation -<wbr/> for technical docs.</span></a></li></ul></li><li><a href="#setup"><span>Setup</span></a></li><li><ul><li><a href="#install"><span>Install</span></a></li><li><a href="#setup-1"><span>Setup</span></a></li><li><a href="#single-file-script"><span>Single file script</span></a></li></ul></li><li><a href="#what-does-it-do"><span>What does it do?</span></a></li><li><a href="#whos-this-for"><span>Who's this for?</span></a></li><li><a href="#contributing"><span>Contributing</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html">@nkeff/cardboard-js</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.