Getting Started

Introduction

Install Crescent.js and build your first full-stack application.

Installation

Install Crescent.js from npm. The framework has zero dependencies — everything you need is bundled in a single package.

bash

npm install crescent-js

What you get

A full-stack framework with frontend rendering, backend logic, a built-in database, and authentication — all behind one cohesive API.

Your First App

Create a page, add an object with a text layer, and position it using Crescent.js's cartesian coordinate system.

app.js

const crescent = require('crescent-js');

// 1. Create a page
const page = crescent.page({
  page_id: 'home',
  page_title: 'My First App',
  page_description: 'Built with Crescent.js',
  size: { height: 800, width: 1200 }
});

// 2. Create an object
const hero = crescent.object({
  object_id: 'hero',
  size: { height: 200, width: 600 }
});

// 3. Add a text layer
const title = crescent.layer({
  layer_type: 'text',
  layer_id: 'title',
  text: 'Hello, Crescent!',
  size: 32,
  colour: '0,0,0',
  bold: true,
  font: 'sans-serif'
});

hero.add_layer(title);

// 4. Add the object to the page
page.add_object(hero);

// 5. Position the object using cartesian coordinates
page.set_object_position('hero', 0, 100);

console.log('App created successfully!');

Cartesian coordinates

Positions are measured from the center of the container. Positive x moves right, positive y moves up. set_object_position('hero', 0, 100) moves the object 100px upward.

Core Concepts

Crescent.js is built around two core pillars that work together seamlessly:

Frontend

Build UIs using pages, objects, and layers. Pages hold objects, objects hold layers, and layers are the visual building blocks (text, image, shape, input). Everything is positioned using a cartesian coordinate system.

Backend

Write logic using functions, conditionals, loops, and API endpoints. Create reusable server-side functions, branch logic with conditionals, iterate with loops, and define REST APIs.

Project Structure

A typical Crescent.js application follows this layout:

project structure

my-app/
├── src/
│   ├── pages/          # Page definitions
│   ├── components/     # Reusable objects and layers
│   ├── functions/      # Backend functions
│   └── app.js          # Entry point
└── package.json

Running Your App

Use the crescent CLI to run your application. It automatically serves on port 3000 unless you specify a custom port.

bash

# Run on a specific port
crescent run src/app.js 3030

# Auto-run on port 3000
crescent run src/app.js

Next Steps

Continue exploring the framework with these guides:

Frontend Guide — pages, objects, layers, and rendering
Backend Guide — functions, conditionals, loops, and APIs
Database Guide — built-in CRUD database
Authentication Guide — signup, login, and OAuth