Lithia.js Studio

Introduction

Lithia Studio is a powerful development UI that provides a visual interface for debugging, testing, and exploring your API during development. It runs alongside your Lithia application and gives you instant access to all your routes, middleware, and request/response data.

Note: Studio is only available in development mode. Even it runs on a different port, it can be insecure if you expose it to the public.

Features

Real-time Monitoring

Lithia.js Studio enables you to see real-time informations about your server. You can see the memory usage, CPU usage, Node.js version, Platform and Uptime.

It keeps a connection to your server and updates the information every 5 seconds. If you close the server, Studio will lock itself and will try to reconnect until it's able to receive data again.

Route Explorer

Route explorer enables you to search and filter routes by path or method. You can also create a new route by clicking the "Create Route" button on the top right corner.

On clicking a route, you'll be able to test the route by sending a request with the request builder.

Route Builder

Route builder enables you to create a new route file by providing the path and method. You'll receive instant feedback if the route is valid or not.

On the right side, you'll be able to edit the route file. TypeScript is supported but types from node_modules are not, so it does not replace your IDE.

Route Tester

Route tester enables you to test the route by sending a request with the request builder. You can set dynamic path parameters, headers, query parameters, and body.

It shows you the response body, headers, status code, and timing.

Troubleshooting

If you get Unable to fetch error, probably you're trying to send a header that your CORS policy does not allow. You can easily add it to your CORS policy in the lithia.config.ts file.

See more at Configuration.

Server Logs

Studio enables you to see server logs in real-time. It catches all console.log from your application and shows them in a real-time log viewer where you can filter by level, time, source, and search.

Getting Started

Enable Studio

Studio is automatically enabled when running Lithia in development mode:

import { defineLithiaConfig } from 'lithia';

export default defineLithiaConfig({
  studio: {
    enabled: true  // Enable Studio (default: false)
  }
});

Access Studio

Once enabled, Studio is available at http://localhost:8473.

Note: Studio always runs on port 8473 and cannot be changed.