bracel

library0.0.7jsnpmunverified

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.

web-framework serialization

npm install bracel

github ↗package ↗

INSTALL

IMPORT

SIG · BRACEL

bracel

web-frameworkjavascriptv0.0.7

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import bracel from 'bracel'

✗ const bracel = require('bracel')

Package is ESM-only; no CommonJS export. Use dynamic import if needed in CJS.

bracel (named import does not exist)

✓ import bracel from 'bracel'

✗ import { bracel } from 'bracel'

Only a default export is provided. Named imports will not work.

Using as CLI

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

✗ bracel file.bracel file.html

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

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);

bracel --version

Debug

Known issues

gotchaPackage 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.

affects: *

breakingBefore 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>

affects: <0.0.5

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

fix

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

affects: >=0.0.6

gotchaEscaping 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 :{ ... }

affects: *

gotchaUnmatched 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.

affects: *

Errors

Common errors & fixes

SyntaxError: Unexpected token ';'

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: Could not find module 'bracel'

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: Must use import to load ES Module: /path/to/bracel/index.js

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;

output is undefined

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.

Upgrade

Version history

0.0.7latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/martyzz/bracel ↗

packagehttps://www.npmjs.com/package/bracel ↗