Logic Components Install
v2 preview

The sweetest way to build the web

Chocola compiles enhanced HTML, CSS, and JS straight to the browser. Write logic as HTML, not template strings — no bundler, no virtual DOM, only one dependency.

status-badge.html
<h1>{title}</h1>

<p>Status: {status}</p>

<div if="{status === 'live'}">
  <span>● Online</span>
</div>
<h1>Chocola</h1>

<p>
 Status: <span>live</span>
</p>

<div>
  <span>● Online</span>
</div>
1
dependency
linkedom, that's it
1
config file
all the config you need for Chocola
<1s
building times
blazing fast
0
bundlers
no Webpack, no Vite; one config
Logic, baked into HTML

if's and logic as elements, not templates

Chocola reads control flow the way it reads everything else: as HTML. No template language to learn, no curly-brace soup to escape: just attributes, and a tag that disappears when it's done its job.

if / elif / else
Chained across sibling elements, resolved like a real conditional.
            

                    <div if="{user.role
                        ===
                        'admin'}">Admin Panel</div>
                    

                    <div elif="{user.role
                        ===
                        'editor'}">Editor Dashboard</div>
                    

                    <div else>View
                    Only</div>
<void> wrapper
Renders only its children — the wrapper itself never reaches the DOM.
            

                    <void if={isLoaded}>
                    

                      <h1>Data Loaded</h1>
                    

                      <p>Here is your content.</p>
                    

                    </void>
Components

A recipe, and the thing it made from it

A component is a combination of HTML, CSS, and JavaScript logic that gets compiled and rendered into your app automatically.

Greeting.html
                    <script>
                    

                     import CoolButton from './CoolButton.html';
                    

                    

                     let self;
                    

                     let input;
                    

                    

                     export let title = "Hello";
                    

                    

                     function $runtime() {
                    

                      input.focus();
                    

                     }
                    

                    </script>
                    

                    

                    <template>
                    

                     <div>
                    

                      <h1>{title}</h1>
                    

                      <input bind:self="input" type="text" placeholder="Your name">
                    

                      <CoolButton label="Not lame button"></CoolButton>
                    

                     </div>
                    

                    </template>
                    

                    

                    <style>
                    

                     h1 { color: chocolate; }
                    

                    </style>
<template>

The enhanced HTML this component renders — logic blocks and bindings included

<script>

Props declaration and component logic

<style>

CSS placed inside <style> is automatically scoped to the component — it won't leak out and affect other components.

Chocola Logo
Get started

Install once. Compile forever.

No boilerplate. No plugins to reconcile. Point Chocola at a folder.

$ npm i chocola@next { Prompt copied! }
Looking for stable? Use npm i chocola