Develop and publish with ease

Zox.js gives developers the power to build scalable web apps and services

Get Started

Templates and React

Use your favorite templating engine combined with a powerful rendering pipeline.
Embed React into your pages to give them life.

Built-in Server-side rendering for React will make your pages search engine friendly and let them load faster.

Learn More

Static Site Generation

Write your blog posts in markdown or create general purpose pages in yaml.

The data will simply be passed to your templates, no coding required.

Using React instead of traditional templates is also possible.

Learn More

GraphQL

Create decoupled GraphQL resolvers in a similar way you would create REST controllers and let the built-in schema builder create the actual GraphQL schema for you.

Subscribe to any GraphQL subscription endpoint via WebSocket or EventStream.

Learn More

A simple controller

Controllers implement a handle() method that returns a Response object which will be in charge of sending the HTTP response.

In this example we create a controller that returns a StringResponse and we assign a route to it.

TypeScript
@Route({
    route: '/page/hello-world'
})
export class MyPage implements IController
{
    public handle(): IResponse
    {
        return new StringResponse('Hello World');
    }
}

Page controller

A PageController is a base controller class that returns our page in a RenderResponse. As the name suggests this class will render our template and add the required js, css and meta tags, before sending the response.

In this example we create a new Renderable object, tell it which template to load and assign properties that will be passed to the template.

Rendering engine is selected based on file extension.

TypeScript
@Route({
    route: '/page/hello-world'
})
export class MyPage extends PageController
{
    public page()
    {
        const renderable = this.container.create(
            Renderable,
            'my-template-name'
        );
        renderable.text = 'Hello World';
        return renderable;
    }
}

A simple API

Creating API endpoints is as simple as creating a controller that returns a JsonResponse.

In this example we create a dynamic route that will let us select the user by id, we will then query the user from our mock users list.

TypeScript
@Route({
    route: '/api/user/:id'
})
export class MyApi extends Controller
{
    public handle(): IResponse
    {
        const data = users.find(u => u.id == this.params.id);
        return new JsonResponse(data);
    }
}

GraphQL resolvers

With GraphQL we get to explicitly define types of inputs and outputs of our endpoints.

In this example we define a top-level Query field called user that accepts one parameter id and return a User object.

TypeScript
@Query('user(id: ID!): User', UserDef)
export class UserQuery extends ResolverBase
{
    public resolve(root, args, context): Array<UserData>
    {
        return users.find(u => u.id == args.id);
    }
}

React SPA

You can simply return a ReactRenderable with your App component and continue with your regular React workflow.

Props can be used to preload data into frontend and combined with server-side renderig it will provide a smooth user experience.
Only props serializable using JSON.stringify() are supported.

TypeScript
@Route({
    route: '/react/hello-world'
})
export class MyReactPage extends PageController
{
    public page()
    {
        return this.container.create(
            ReactRenderable,
            <App text='Hello World' />
        );
    }
}
Get Started