Crescent.js logoCrescent.jsv1.0.3
Guides

Frontend Guide

Build user interfaces with pages, objects, and layers using Crescent.js.

Pages

Pages are the top-level containers of your UI. Every page has a unique page_id, a title, a description, and a size in pixels.

pages.js
const page = crescent.page({
  page_id: 'landing',
  page_title: 'Landing Page',
  page_description: 'Marketing page',
  size: { height: 900, width: 1440 }
});

// Add objects and render the page
const hero = crescent.object({
  object_id: 'hero',
  size: { height: 200, width: 600 }
});

page.add_object(hero);
page.render();

Multiple pages

You can create as many pages as you need. Each page holds its own objects and is rendered independently.

Objects

Objects are the building blocks placed on a page. Each object has a size, an optional position, and holds layers. Objects are the containers that define what appears on screen.

objects.js
const header = crescent.object({
  object_id: 'header',
  size: { height: 80, width: 600 },
  page_position: { x: 0, y: 0 }
});

page.add_object(header);

// Reposition after adding
page.set_object_position('header', 0, 100);

Layers

Layers are the visual elements inside objects. Crescent.js supports four layer types: text, image, shape, and input. Layers are added to an object with add_layer().

Text Layers

text-layer.js
const title = crescent.layer({
  layer_type: 'text',
  layer_id: 'title',
  text: 'Welcome to my app',
  size: 48,
  colour: '0,0,0',
  bold: true,
  font: 'sans-serif'
});

header.add_layer(title);

Image Layers

image-layer.js
const logo = crescent.layer({
  layer_type: 'image',
  layer_id: 'logo',
  image_location: 'https://example.com/logo.png',
  size: { height: 60, width: 180 }
});

header.add_layer(logo);

Shape Layers

shape-layer.js
const divider = crescent.layer({
  layer_type: 'shape',
  layer_id: 'divider',
  layer_vertices: 4,
  size: { height: 2, width: 200 },
  colour: '0,0,0'
});

header.add_layer(divider);

Input Layers

input-layer.js
const username = crescent.layer({
  layer_type: 'input',
  layer_id: 'username',
  input_method: 'text box',
  box_length: 20,
  box_inner_text: 'Enter your username',
  size: { height: 45, width: 300 }
});

header.add_layer(username);

Positioning

Crescent.js uses a cartesian coordinate system measured from the center of the container. Objects are positioned using set_object_position().

positioning.js
page.set_object_position('header', 0, 0);

// Move an object 150px to the right
page.set_object_position('card', 150, 0);

// Move an object 200px up
page.set_object_position('card', 0, 200);

Coordinate system

Coordinates are relative to the center, not the top-left corner. Positive x moves right, positive y moves up.

Adding Events

Layers can listen for user interactions like clicks, hovers, and keyboard input. Events are wired up with crescent.trigger(), which binds a handler to the layer's rendered element by layer_id.

events.js
crescent.trigger({
  layer_id: 'title',
  event: 'click',
  true_sequence: [
    function (event) {
      console.log('Clicked!', event);
    }
  ]
});

crescent.trigger({
  layer_id: 'logo',
  event: 'hover',
  hover_direction: 'enter',
  true_sequence: [
    function () {
      console.log('Hovering the logo');
    }
  ]
});

Trigger actions

Trigger sequences are arrays of functions. They can also hold actions like { type: "redirect", page_id: "home" } or { type: "set_property", layer_id, property, value }.

Next Steps