DMITRY MELNIKOV
Project 04· Personal

Janus

The two faces of API design. Precision editing meets instant visualization.

Year2026
StatusDone
Stack
TypeScript · React · Monaco
Backend
Swagger UI · Nginx
Protocols
OpenAPI · AsyncAPI
One-liner
API design, synchronized.
Fig. 01

Janus

Overview01

Free and lightweight, not opinionated app to edit and preview Swagger/OpenAPI schemas.

Another stateless application. Named after the Roman god of transitions, Janus is an editor that supports two standards: OpenAPI (REST) and AsyncAPI (Event-driven). It provides a unified environment where developers can write specifications with the power of the Monaco Editor and see them rendered instantly.

The application is built as a Progressive Web App (PWA), ensuring it works perfectly offline and can be installed as a native-like desktop application. This “local-first” philosophy is central to the Janus experience, prioritizing speed and availability.

By utilizing LZ-compression on top of Base64-based encoding for its sharing feature, Janus allows architects to share complex API designs simply by copying a URL, eliminating the need for a database backend and ensuring total data privacy.

Timeline Q1 · 2026 Scope Editor UX
Protocol Integration
Offline PWA Scale OpenAPI + AsyncAPI
Instant sharing

Architecture02

Stateless sharing with a stateful editing experience.

Janus architecture diagram showing Monaco Editor, React state, and API preview renderers
Fig. 02 — System Flow · Monaco Editor to Swagger UI/AsyncAPI preview with URL-based persistence
Decisions03

Designed for portability.

/01
Split-view synchronicity

Prioritized a side-by-side view to ensure that every change in the specification is immediately visible in the rendered documentation. This reduces the cognitive load on the architect and ensures the design remains accurate.

Tradeoff · UI complexity, instant feedback
/02
Monaco for "heavy" editing

For API specifications, which can grow to thousands of lines, a simple textarea is insufficient. Monaco provides the professional features developers expect: syntax highlighting, validation, and intelligent indentation.

Tradeoff · bundle size, professional DX
/03
Zero-backend sharing

Using pako for compression, application encodes the entire document state into the URL hash. This means Janus can be hosted as a static site while still supporting deep collaboration and sharing.

Tradeoff · URL length limits, absolute privacy
/04
Nginx on Fly.io

The production build is a set of static assets served via a Dockerized Nginx container. This setup allows for global edge deployment, like Fly.io, ensuring the editor loads instantly from anywhere in the world.

Tradeoff · static hosting, high availability

The best documentation is the one that updates itself while you type :)

— Unknown
Outcome05

Always avilable , environment, flexible design.

Janus has become a reliable companion for API design in my work. It proves that you don’t need a complex SaaS platform to build professional tools; by focusing on browser capabilities and smart protocol integration, you can create a high-impact workstation that is both private and performant.

The project highlights the strength of the modern React ecosystem when combined with powerful third-party components like Monaco and Swagger UI, delivered as a durable PWA.

Impact Zero-latency editing
Offline-first design Cost 1 weeks · Solo build Next Multi-file support
Custom linting rules

Fig. 02

Light theme.

Fig. 03

Dark theme.

Fig. 04

Vertical layout for narrow screens.