---
title: "Frontend — Spiff Arena 0.1 documentation"
description: "spiffworkflow-frontend is a React application that relies on the spiffworkflow-backend REST API. We try to keep library bloat to a minimum."
source_url: https://spiff.works/docs/spiff-arena/explanation/dev/frontend.html
---

☰ Menu

# Frontend[](#frontend "Link to this heading")

spiffworkflow-frontend is a React application that relies on the spiffworkflow-backend REST API.
We try to keep library bloat to a minimum.

## Libraries[](#libraries "Link to this heading")

### bpmn-js[](#bpmn-js "Link to this heading")

The bpmn-js library is used to render and edit BPMN diagrams.
This library is maintained by the Camunda team.

### bpmn-js-spiffworkflow[](#bpmn-js-spiffworkflow "Link to this heading")

These are SpiffWorkflow extensions to bpmn-js to create a better experience when executing BPMN diagrams using the SpiffWorkflow execution engine.

### rjsf/core, @rjsf/utils, etc.[](#rjsf-core-rjsf-utils-etc "Link to this heading")

React JSON Schema Form is used to build forms from JSON schemas.
You can attach JSON schemas to tasks that are meant to be completed by people (User Tasks), and the frontend will render a form for that task.
You can specify what data is required as well as how the form should look.

### @tanstack/react-query[](#tanstack-react-query "Link to this heading")

We haven’t deeply integrated this library, but it is used by the system that caches permission calls.

## Layers[](#layers "Link to this heading")

graph LR
Routes -- delegate work to --> Services

### Routes[](#routes "Link to this heading")

When the browser sees a URL like /hithere, it will render a route component to handle the request.

### Services[](#services "Link to this heading")

The route component may or may not delegate some of its work to a service.

## Deployment[](#deployment "Link to this heading")

The generated Docker image uses nginx to serve static HTML/CSS/JS files that are generated by the Vite build process.
These files can also be hosted on a CDN.