Serverless CMS backed by Firebase


0.2.176 years ago6 years agoMinified + gzip package size for anthracite in KB



Fully client-side single-page application talking to FireBase to build a customizable CMS backed by a robust RESTful API. (Because the API is just FireBase!)


  1. npm install anthracite
  2. Rename index-example.html to index.html, changing the <base> tag if necessary
  3. Rename config-example.js to config.js and set your firebase endpoint
  4. Open index.html in a browser


  1. Create a fork of
  2. git clone<username>/anthracite.git
  3. cd anthracite
  4. npm install
  5. Rename index-example.html to index.html, changing the <base> tag if necessary
  6. Rename config-example.js to config.js and set your firebase endpoint
  7. npm run build
  8. npm start
  9. Open http://localhost:9966 in a browser


You'll want to create a schema first. Schemas are JSON-ish documents that contain some number of fields.

Once you've created a schema you can create instances of that schema. All edits are synced in near-real-time to FireBase, so your data should always be in sync.

Input Fields


Simple <input type="text"> field


A <textarea> that will automatically grow in height (to a reasonable maximum) to fit its content.


Simple <input type="number"> field


Simple <input type="date"> field


Simple <input type="datetime-local"> field


Simple <input type="email"> field


Simple <input type="url"> field


A group of <input type="radio"> fields


A single <input type="checkbox"> field


A <select> and a number of <option> elements contained within


Renders an input that autocompletes entries in the specified schema to set up many-to-many relationships.


Draws a drop target that will upload files to a defined location. Depends on a web service existing on some other server that can feed it both the upload target location as well as any other form params required to be sent along. Implemented this way so that anthracite's uploader can be agnostic and not particularly care about where the file is going. See #97 for configuration details.

Structural Fields


Renders a <fieldset> (with an optional <legend>) that will wrap all the child elements


Allows for repeating a group of child fields multiple times


Split multiple fields horizontally.


Group fields into a series of tabs.

Miscellaneous Fields


Provide instructions for CMS end-users.


You can attach dom-specific attributes to most types by specifying an attrs key w/ an associated object.

    "Number" : {
        type  : "number",
        attrs :  {
            min  : 0,
            max  : 10,
            step : 2

Example schema

    // Comments are allowed, as are unquoted keys

    // The simplest types are just a string because they need no config
    Field : "text",

    // More complicated types always have at least a "type" property, and depending
    // on what they are will use a few more

    // instructions types have one of a head or body, or both.
    Start : {
        type : "instructions",
        head : "This is a content type",
        body : "Here is what you do with it, hello"

    // Fieldsets are a direct mapping to <fieldset>
    Schedule : {
        type : "fieldset",
        fields : {
            Instructions : {
                type : "instructions",
                body : "Enter schedule information for this thing"

            // Repeating fields allow for multiple data points to be added
            Repeating : {
                type : "repeating",
                fields : {
                    test : "text"
    Text : "text",
    Number : "number",

    // Split fields
    split : {
        type : "split",
        sections : {
            left : {
                location : "text"
            right : {
                rank : "text"

    // Tabbed fields
    tabs : {
        type : "tabs",
        tabs : {
            EN : {
                "Title" : "text",
                "Body" : "text"

            DE : {
                "Title" : "text"

    // <select> analogue, showing both short hand <option> values as well as
    // making one option selected by default
    "Make your choice" : {
        type : "select",
        options : {
            one : 1,
            two : {
                value : 2,
                selected : true
            three : 3,

    // Checkbox
    Checkbox : {
        type : "checkbox",
        options : {
            one : "option 1",
            two : "option 2"

    // Radio buttons
    Radio : {
        type : "radio",
        options : {
            one : "foo",
            two : {
                value : "bar",
                selected : true

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from