Jadelet

Jadelet is a minimal clientside templating library that compiles Jade-like markup into plain JavaScript DOM-building code, weighing under 5.8kb and running anywhere JavaScript runs.

What is Jadelet?

Jadelet is an open-source (MIT-licensed) clientside templating library that takes templates written in a Jade-like syntax—where tags and attributes map directly to HTML—and compiles them into JavaScript functions that produce DOM nodes. Instead of rendering HTML strings, Jadelet builds elements using native DOM APIs, so the output is already live DOM you can append to the page. The library is small (under 5.8kb) and has been used in production for years by glitch.com, whimsy.space, and danielx.net.

Key Features

• Jade-like syntax: Write h1 @title to create an h1 element whose text content comes from the title property of the data passed to the template function.
• Direct attribute mapping: Attributes in templates correspond one-to-one with HTML attributes; event listeners are declared with @click and automatically attached.
• Native DOM output: Templates return actual HTMLElement or Node instances built with createElement and similar APIs—no intermediate HTML strings or innerHTML parsing.
• XSS-safe by default: Because strings are inserted as text nodes via textContent, user-provided values cannot inject markup, making the library safe against cross-site scripting without extra sanitization.
• CLI compiler: The included jadelet command converts .jadelet files to JavaScript, with options like -d for directories, --exports for custom module exports, and --runtime for browser globals.
• Node environment support: Templates compile to CommonJS modules, so you can require() them with webpack, browserify, or any bundler.
• Small footprint: The full library is under 5.8kb (the project roadmap lists a target of under 2.5kb), making it one of the lightest clientside templating options.
• Single root requirement: Templates must contain exactly one root element; multiple roots cause a compile-time failure, which encourages simple component boundaries.

Who is it for?

• JavaScript developers who want a tiny, dependency-free templating layer for building DOM-heavy interfaces without a framework.
• Developers coming from Haml/Jade who appreciate concise, indentation-based markup and want similar ergonomics in the browser.
• Bundle-size-conscious teams that ship libraries or widgets where every kilobyte matters and don't need the overhead of React or Vue.
• Tool builders who need to compile templates ahead of time with the CLI and integrate the output into their existing module pipeline.

What can you do with Jadelet?

• Create reusable components: Compile a template like button(@click) Say Hey into a function that takes a click handler and returns a ready-to-attach button element.
• Render dynamic content safely: Pass user-generated strings as data; Jadelet writes them as text nodes, so they display as-is without risk of XSS.
• Compose DOM with events: Use @-prefixed attributes to wire up event listeners at creation time—no separate addEventListener calls needed.
• Integrate with any bundler: Compile templates to .js modules with the CLI and require() them in your app, letting webpack or other bundlers handle dependencies.

How does Jadelet work?

Install with npm install jadelet, then run node_modules/.bin/jadelet -d templates to compile every .jadelet file in the templates directory into a .js file. Each compiled file exports a function that takes a data object and returns a DOM element. For single-file use, the CLI also accepts templates on stdin: echo "h1#title @title" | jadelet prints the compiled JavaScript to stdout.

FAQ

Is Jadelet safe from XSS?

Yes. Jadelet uses native DOM APIs to write string output as text nodes, so values passed to templates are interpreted as text, not HTML. This prevents injection attacks without requiring manual escaping.

How do I render HTML elements with Jadelet?

Pass an HTMLElement (or any descendant of window.Node) as a value in your data object. Jadelet detects the type at runtime and inserts the element directly into the DOM instead of serializing it as text.

Is Jadelet production ready?

Yes. Jadelet has been used in production for years by glitch.com, whimsy.space, and danielx.net, and the project is MIT licensed and open source.

Is Jadelet performant?

Jadelet builds DOM nodes directly, avoiding string parsing and innerHTML overhead. The FAQ notes you can always drop down to native DOM APIs for pieces that need special optimization.

Are there any limitations?

Templates must have a single root element—multiple roots will cause compilation to fail. The library is also focused on clientside DOM rendering and does not include server-side rendering features out of the box.