Accessing Content

Overview

Fumastudio is a content deployment tool that lets you publish your API collections as documentation.
It generates .mdx files at the end of the build step, meaning your API collections can be turned into rich pages that combine text, code, and UI components.
These .mdx files can be rendered directly in your app, work with your code editor, and display properly in your site.

Fumastudio MDX

Fumastudio’s MDX system is built to support both no-code editing and file-based workflows.

When you define components or plugins in specific folders, they’re automatically picked up by your framework —
currently, Next.js is supported. During build time, these components are injected into your pages,
allowing you to ship beautiful docs effortlessly.

Right now, the api-reference page is the only supported layout for interactive rendering.

Example

Here’s what an example API Reference MDX file looks like:

---
title: Access Groups
date: "02-20-2025"
---

<fs_api_page
req={{
  "folder": "access-groups",
  "name": "Reads an access group",
  "description": "Allows to read an access group",
  "method": "PUT",
  "url": "/v1/access-groups/{idOrName}",
  "request_snippets": {
    "Javascript": "const url = 'https://api.vercel.com/v1/access-groups/{idOrName}';\nconst options = {\n  method: 'GET',\n  headers: {\n    Authorization: 'Bearer <token>'\n  }\n};\n\ntry {\n  const res = await fetch(url, options);\n  const data = await res.json();\n  console.log(data);\n} catch (err) {\n  console.error(err);\n}",
    "cURL": "curl --request GET \\\n  --url https://api.vercel.com/v1/access-groups/{idOrName} \\\n  --header 'Authorization: Bearer <token>'"
  },
  "response_snippets": [
    {
      "id": "200",
      "code": "{\n  \"entitlements\": [\"v0\"],\n  \"isDsyncManaged\": true,\n  \"name\": \"my-access-group\",\n  ...\n}"
    },
    {
      "id": "400",
      "code": "{\n  \"error\": {\"code\": \"<string>\", \"message\": \"<string>\"}\n}"
    }
  ],
  "auth": { "type": "bearer token" }
}}
footer={{
  "socialLinks": [
    { "href": "https://x.com/vercel", "label": "x", "iconUrl": "..." },
    { "href": "https://github.com/vercel", "label": "github", "iconUrl": "..." },
    { "href": "https://linkedin.com/company/vercel", "label": "linkedin", "iconUrl": "..." }
  ]
}}
pagination={scope_pagination_at_runtime}
/>

Common Issues

When dealing with large numbers of MDX files, build and development performance can degrade quickly. Here’s why:

• Bundlers like Webpack or Vite need to process and optimize every MDX file.
• They aren’t built to handle hundreds of MDX documents efficiently.
• Supporting both technical and non-technical users adds extra complexity.
• Enabling custom components inside the editor required workarounds.
• Keeping static MDX content dynamic (e.g., saving back to GitHub) adds more overhead.

How Fumastudio Solves This

Fumastudio compiles MDX on demand instead of all at once. This means your content only loads when needed, reducing memory and build time.

It also provides a plugin system so you can define your own components and use them both inside the editor and in your rendered pages (this is currently experimental).