DevForge LogoDevForgeDocs
Search
LandingWorkbench

Overview

Home

Guides

Markdown Reference

GFM syntax guide

Studio

DevForge Studio

studio

Data Tools

JSON Formatter

json-formatter

Base64 Ultimate Studio

base64-ultimate-studio

JWT Decoder

jwt-decoder

String Case Converter

string-case-converter

YAML ↔ JSON

yaml-json-converter

DB Schema Visualizer

db-schema-visualizer

API Client Studio

api-client

SHA-256 Hash Generator

sha256-generator

SVG Optimizer

svg-optimizer

Writing Tools

Markdown Editor

markdown-editor

ASCII Art Generator

text-to-ascii-art

Doc Builder

doc-builder

Pattern Tools

Regex Tester

regex-tester

Diff Viewer

diff-viewer

Generators

Code Generator

code-generator

UUID Generator

uuid-generator

Color Palette Studio

color-palette

Cron Generator

cron-generator

Dockerfile Generator

dockerfile-generator

K8s YAML Builder

k8s-yaml-builder

AI Tools

AI Explainer

code-explainer

AI UI Generator

ai-ui-generator

Documentationstudio

Tool reference

DevForge Studio

beta

Visual website builder for documentation sites, developer portals, API references, and landing pages. Build with a drag-and-drop block editor or a rich text docs editor, apply design themes, and publish to a public URL instantly.

Open toolBack to docs

Quickstart

Use this when you want the shortest path from input to a useful result.

1

Open Studio from the workbench sidebar.

2

Click 'New Site' and give your site a name.

3

Choose a template (Developer Portal, AI Landing, API Reference, etc.) or start blank.

4

Create your first page and pick a page type: Docs, Landing, Changelog, or API Reference.

5

Edit content in the visual builder or rich text editor.

6

Click Publish to make the page live at /sites/your-slug.

Best for

Common situations where this tool fits naturally into the workflow.

  • Create a documentation site for your open-source project or product.
  • Build a developer portal with API reference pages and code examples.
  • Design a landing page for a SaaS product with the visual block editor.
  • Maintain a public changelog with timeline-style release notes.
  • Set up a knowledge base with nested pages and full-text search.

Common tasks

Concrete ways this tool is typically used in day-to-day workflows.

Apply a design theme

Go to Site Settings → Design Theme and pick from 11 presets including Glassmorphism, Cyberpunk, Neo Brutalism, and Minimalism.

Add a new block

In the visual builder, open a section and click 'Add Block' to insert headings, text, buttons, code blocks, API endpoints, callouts, and more.

Publish a page

Click the Publish button in the page editor top bar. Published pages are live at /sites/[site-slug]/[page-slug] immediately.

Restore a previous version

Click the History icon in the page editor to view version snapshots. Click Restore on any version to roll back.

Change site visibility

In Site Settings, set visibility to Public (accessible to anyone), Private (owner only), or Unlisted (accessible via direct link).

Duplicate a site

From the Studio home, open the site menu (⋯) and choose Duplicate Site. All pages and theme settings are copied.

Examples

Real inputs and outputs that show how the tool behaves.

Developer Portal

Start with the Developer Portal template for a Stripe-style dark docs site.

Template

Developer Portal (dark theme, developer-portal preset)

Result

A dark documentation site at /sites/[slug] with hero, features, and API reference sections pre-populated.

API Reference page

Add API endpoint blocks to document your REST API.

Block type

API Endpoint block: GET /v2/resources

Rendered output

Styled endpoint card showing method badge, path, and description — matching typical API doc conventions.

Features

What this tool includes and what each capability is for.

Visual Block Builder

Drag-and-drop sections and blocks to build landing pages with headings, buttons, code, callouts, API endpoints, tabs, accordions, and more.

Rich Text Docs Editor

Tiptap-powered editor for documentation pages with full Markdown-style formatting, tables, code blocks with syntax highlighting, and media embeds.

11 Design Themes

One-click theme presets: Minimalism, Glassmorphism, Cyberpunk, Material, Fluid, Brutalism, Neo-Brutalism, Corporate, AI Startup, and Developer Portal.

Instant Publishing

Publish any page to a public /sites/[slug] URL with a single click. Changes go live immediately — no build step required.

Version History

Every publish creates a versioned snapshot. Restore any previous version to roll back content or design changes.

Workflow

Follow this path to get from input to output quickly.

1

Create a site with a name, description, and visibility setting.

2

Choose a template to pre-populate theme and first page content.

3

Add pages with different types: DOCS, LANDING, CHANGELOG, API_REFERENCE, or CUSTOM.

4

Edit page content using the visual builder or rich text editor.

5

Publish pages to make them live at the public /sites/ URL.

6

Manage assets by uploading images and files to Cloudflare R2.

7

Use version history to track and restore previous page states.

8

Configure design themes in Site Settings to match your brand.

Caveats and tips

Things to keep in mind before relying on the output in a larger workflow.

Caveats

  • Visual builder is for LANDING and CUSTOM page types. DOCS, CHANGELOG, and API_REFERENCE pages use the rich text (Tiptap) editor.
  • Autosave runs every 2.5 seconds — unsaved changes may be lost if you close the tab before the timer fires.
  • Site slugs are generated from the site name and cannot be changed after creation.
  • Asset uploads are stored in Cloudflare R2 with a 20 MB per-file limit.

Tips

  • Use the template picker when creating a new site — templates pre-populate your first page with relevant blocks and a matching theme.
  • Publish your page before sharing the /sites/ URL — draft pages return 404 to public visitors.
  • For API docs, combine API Endpoint blocks with API Response blocks and Code blocks to show a complete request/response cycle.
  • Use the version history to create named snapshots before major redesigns so you can roll back easily.

On this page

QuickstartBest forCommon tasksExamplesFeaturesWorkflowCaveats and tips

Related pages

More related pages will appear here as this category grows.