OpenPress

Start here

Getting Started

Start from a slide, source folder, or creative skill. Have your Agent create an OpenPress Workspace, or run the CLI directly.

Prerequisites. Please ensure your environment has Node.js 20+ installed along with npm and npx. For framework development or Cloudflare Pages deployment, Node.js 24 is recommended. PDF/image export requires Chromium; Word DOCX export does not require a browser; deployment requires wrangler.

Next, you will learn how to create an OpenPress Workspace, edit document content, and preview and deploy your first document in real time.

Step 1: Create Your Workspace

You can choose to start via an AI Agent or directly using the CLI. We will guide you using the simplest method.

Create using CLI

Open your terminal and run the following command to create a new presentation:

npm create @open-press@latest my-deck -- \
  --type slides \
  --title "Transport models"

Then enter the project folder and install dependencies:

cd my-deck
npm install

Step 2: Start Live Preview

Before writing content, let’s start the Workbench to view the results in real time. Please run:

npm run dev

Then open http://127.0.0.1:5173/workspace in your browser. You will see the project gallery. When you modify files and save, the screen will automatically update.

Step 3: Edit Document Content

All your content is stored under the press/ folder. Let’s edit your first slide.

In your editor, open press/<your-project-name>/slides/intro/slide.tsx. Change the default content to your welcome text:

import type { SlideMeta } from "@open-press/core";
import { Frame, Slide, Text } from "@open-press/core";

export const meta = {
  layout: "cover",
  description: "Opening slide",
} satisfies SlideMeta;

export default function IntroSlide() {
  return (
    <Slide id="intro" className="op-slide-page">
      <Frame frameKey="canvas" chrome={false} className="op-slide-canvas">
        <Text as="h1" label="title" box={{ x: 120, y: 420, w: 1200 }}>
          Welcome to my first OpenPress presentation!
        </Text>
      </Frame>
    </Slide>
  );
}

After saving, switch back to your browser, and you will see the content has updated.

Step 4: Build and Inspect

When you have finished editing, we can validate the document’s structure and output:

npm run build         # Validates + renders dist-react/
npm run preview       # Serves dist-react/ as a static site
npm run openpress:pdf # Optional: Generate PDF locally

Page Press workspaces can also run npm run openpress:word to generate Word DOCX locally.

If validation fails, the build aborts before Vite runs, so a green build means the document shape is consistent. See CLI · Lifecycle to understand what each step does.

Step 5: Deploy

OpenPress requires explicit confirmation for any deployment — no silent publishing. Configure an adapter under the "openpress.deploy" field in your workspace’s package.json, then run:

npm run openpress:deploy:dry-run        # Preview step
npm run openpress:deploy -- --confirm   # Publish

The deploy command builds, generates output artifacts, writes deploy.json metadata, and hands off to the configured adapter. If a host-specific adapter has not been implemented yet, use the generated build output directly and perform the publish step outside of OpenPress.

Next Steps