The content editor

The content editor is the main tool used for editing documents. It's where you'll be writing your content, adding links, images, etc…

Writing content

You can write content in the editor as if you would on any other text editor. The editor supports some markdown syntax, for example, typing ## when starting a new line will transform it into an H2 heading.

Any text you write inside the content editor can be modified and stylised using the editor menus.

Menus

There are two main menus used while editing content. The selection menu and the slash command menu.

The selection menu appears whenever you select content within the editor. It helps you turn the current selected word or node into other elements. You can easily add bold, italics, links, etc…

The slash command menu appears whenever you type /. It allows you to create headings, add images, code blocks, quotes, etc... You can either use the arrow keys to navigate the commands or start typing to filter them.

Uploading media

You can enhance your documents by adding media through the editor. In the slash command menu, choose the Image command and then decide whether you want to:

• upload a file from your computer
• link to an external image URL
• pick an existing image from the Media Library

You can also paste or drag and drop an image directly into the editor.

Outstatic now uses media sources instead of a single repository path and public path. A media source lets you define:

• a label, such as Images or Documents
• the repository folder where files are stored
• the public path written into your content
• the file categories or exact extensions allowed for that source

If you try to upload or insert an image before configuring an image-capable source, Outstatic opens Media Settings so you can create one.

Each source is created in three steps:

1. Label
2. Paths: repository path and public path
3. Types: categories and extensions

Categories are preset extension groups. For example, selecting Image adds common image extensions to the source. You can also edit the final comma-separated extension list manually.

The Media Library uses the configured media sources when uploading files. The source picker includes All Media, which lets you browse every uploaded file across all sources. Use the Add Media button to upload files. It accepts all extensions allowed by your configured sources.

To keep uploads predictable, media sources should not overlap. Each extension should belong to a single source. For example, you might use:

• Images for png, jpg, webp
• Documents for pdf, docx, txt

Outstatic fetches uploaded files directly from GitHub so they can be previewed immediately inside the editor and media library.

AI completion

Outstatic includes AI completions out of the box, so you can keep writing without context switching. Pick the setup that matches how you want to run AI in your project:

Option 1 (Recommended): Outstatic-managed AI via OUTSTATIC_API_KEY (Pro Users Only)

If you’re a pro user and using OUTSTATIC_API_KEY, you don’t need to configure any AI provider keys or models. Outstatic handles the AI provider for you and uses a high-quality, up-to-date completion model, with very generous usage designed for normal editorial workflows.

1. Create an Outstatic account
2. Create a project and generate an API Key
3. Set your Outstatic API key in your environment:

OUTSTATIC_API_KEY=ost_XXXXXXXXXXXXXXXXXXXXXXXXX

Option 2: Vercel AI Gateway via AI_GATEWAY_API_KEY

If you want to centralize AI usage and billing through Vercel, you can use Vercel AI Gateway instead:
https://vercel.com/ai-gateway

Set your environment variable:

AI_GATEWAY_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXX

Option 3: OpenAI directly via OPENAI_API_KEY

If you prefer calling OpenAI directly, set your OpenAI key:

OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXXXXXXX

Model Selection (self hosted)

Self hosted installs can choose which model to use by setting OST_AI_MODEL.

Pick a model ID from:
https://vercel.com/ai-gateway/models

Then set:

OST_AI_MODEL=provider/model-id-here

Outstatic will use that model for completions.

Using completions

When this is done you will be able to trigger completion in three ways. Through the slash command menu by selecting the Continue writing option, by typing ++, or by selecting text and clicking on the Ask AI bubble menu.

Outstatic's AI-powered completions offers you an effortless writing experience by suggesting content continuations and creative directions in real-time.

Mathematical Expressions

Outstatic supports math expressions using LaTeX format. Example:

$E=mc^2$

You can add them to your Markdown by clicking the Σ icon in the formatting menu. For more details, see GitHub’s Writing Mathematical Expressions guide.

Please note that only inline expressions are currently supported—block expressions are not yet available.

To render LaTeX in your frontend you will need to install the packages needed for your framework. You can use katex, remark-math and rehype-katex.

Here's a small example for Next.js:

pnpm i katex remark-math rehype-katex

In your layout.tsx files add:

 
import "katex/dist/katex.min.css";

And in your mdx-bundler:

import { bundleMDX } from 'mdx-bundler'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
 
export default async function MDXServer(code: string) {
  const result = await bundleMDX({
    source: code,
    mdxOptions(options) {
      ...
      options.remarkPlugins.push(remarkMath as any)
      options.rehypePlugins = options.rehypePlugins ?? []
      options.rehypePlugins.push(rehypeKatex as any)
      ...
 
      return options
    }
  })
 
  return result.code
}