Overview

What is QuantumJS?

QuantumJS is a static site generator - a tool for converting human readable markup into HTML. Websites built with QuantumJS can be deployed to anywhere that can host static files (Firebase Hosting, Amazon S3, Google Cloud Storage, etc).

QuantumJS comes with a CLI (command line interface) and API for building sites.

Features

QuantumJS comes preloaded with some modules for writing beautiful API docs, drawing simple diagrams, and comes with various utilities to help with writing documentation. It also has support for versioned content templates and code highlighting. All of this is supported through a simple Markup Language. QuantumJS has its own markup language, but it also has support for Markdown, for when only basic formatting options are needed, or for working with existing Markdown-based sites.

Other Features

Explicit, easy to learn markup language for building web pages
Built with customisability / extensibility in mind
Uses node.js - full access to npm when writing custom transforms
Prebuilt entity transforms for writing technical documentation
Auto browser page refresh when files are changed
Fast - builds this site in ~2 seconds

Example

Suppose we have this very simple page (written using Quantum's markup)

sign-in.um

@div: Welcome to the site, please sign in below
@signIn

Building this page with quantum, would produce the following

sign-in.html

<div>Welcome to the site, please sign in below</div>
<div class="sign-in">
  <input class="username-input" placeholder="Username"></input>
  <input class="password-input" placeholder="Password"></input>
  <button class="sign-in-button">Sign in</button>
</div>

The above conversion actually made use of this custom transform, that we defined just for our site.

const dom = require('quantum-dom')

exports.signIn = (selection) => {
  return dom.create('div').class('sign-in')
    .add(dom.create('input').class('username-input'))
    .add(dom.create('input').class('password-input'))
    .add(dom.create('button').class('sign-in-button').text('Sign in'))
}

What's Next?

Head to the Quick Start page to get started with QuantumJS.