bracel

0.0.7 verified Fri May 01 auth: no javascript

bracel is an HTML transpiler that lets you write HTML using a syntax similar to JavaScript function scopes and expressions. Paired tags are written as function-like scopes (tag { content }), and unpaired tags end with a semicolon. It supports arguments, escaping characters, and escaping blocks. Version 0.0.7 is the latest stable release, though the package is very early-stage and not actively maintained. It differentiates itself from template languages like Pug by offering a more JS-centric syntax. The package can be used via CLI or programmatically, and has a roadmap questioning community interest.

Common errors

error SyntaxError: Unexpected token ';' ↓

cause Using a semicolon inside a paired tag without it being an unpaired tag (e.g., writing p { ; } instead of p { content } or img();

fix

Remove stray semicolons or ensure unpaired tags are correctly formed with tag name and arguments before semicolon.

error Error: Could not find module 'bracel' ↓

cause bracel is not installed or not in node_modules. Possibly using require() in a CJS project without dynamic import.

fix

Install locally: npm install bracel. If using CommonJS, use dynamic import: const bracel = await import('bracel');

error Error: Must use import to load ES Module: /path/to/bracel/index.js ↓

cause Using require() on an ESM-only package.

fix

Change require to import or use dynamic import: import bracel from 'bracel'; or const bracel = (await import('bracel')).default;

error output is undefined ↓

cause Unknown input format or empty string passed to bracel().

fix

Ensure input is a non-empty string containing valid bracel syntax. Check for leading/trailing whitespace.

Warnings

gotcha Package is extremely early-stage (v0.0.7). Breaking changes expected without notice. Not suitable for production. ↓

fix Consider using stable alternatives like Pug or Handlebars for production. Pin to specific version if using.

breaking Before v0.0.5, CLI arguments were positional. v0.0.5+ requires --input and --output flags. Scripts using older syntax will break. ↓

fix Update CLI usage: bracel --input <file> --output <file>

deprecated CommonJS require() may stop working in future versions. The package currently only exports ESM. ↓

fix Use import or dynamic import. Do not rely on require().

gotcha Escaping blocks with colon (e.g., script :{) is required to prevent bracel from interpreting curly braces inside script/style tags. Missing colon causes syntax errors or corrupted output. ↓

fix Use colon before opening brace: tag :{ ... }

gotcha Unmatched curly braces or semicolons inside paired tags will cause parse errors. bracel does not provide detailed error messages. ↓

fix Ensure all paired tags have matching braces and unpaired tags end with semicolons. Use the online playground to debug.

Install

npm install bracel

yarn add bracel

pnpm add bracel

Imports

default
wrong
```
const bracel = require('bracel')
```
correct
```
import bracel from 'bracel'
```
Package is ESM-only; no CommonJS export. Use dynamic import if needed in CJS.
bracel (named import does not exist)
wrong
```
import { bracel } from 'bracel'
```
correct
```
import bracel from 'bracel'
```
Only a default export is provided. Named imports will not work.

Using as CLI

wrong

bracel file.bracel file.html

correct

npm install -g bracel && bracel --input file.bracel --output file.html

CLI requires --input and --output flags, not positional arguments.

Quickstart

Transpile a string of bracel syntax to HTML using the default export, then write to file.

import bracel from 'bracel';
import fs from 'fs';

const input = `
html(lang="en") {
  head {
    meta(charset="utf-8");
  }
  body {
    p {
      Hello, world!
    }
  }
}
`;

const output = bracel(input);

fs.writeFileSync('index.html', output, 'utf8');
console.log(output);