Node.js v18.17+ is required. The project uses the Next.js App Router and native fetch. No native binary modules, iOS/Android steps, or expo prebuild are involved. If deploying to Netlify, the included netlify.toml handles build configuration.

Project setup

1. Copy the source/ directory (i.e., apps/studio) into your monorepo or project root, e.g., packages/studio/.

2. Add or merge into your root package.json workspaces:

   {
     "workspaces": ["packages/studio"]
   }
   

3. Wire tsconfig.json paths. Ensure your root (or the studio package) tsconfig.json has:

   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/*": ["./src/*"]
       },
       "lib": ["dom", "dom.iterable", "esnext"],
       "module": "esnext",
       "moduleResolution": "bundler",
       "jsx": "preserve"
     }
   }
   

4. Configure required environment variables. Create .env.local in the studio package root:

   NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
   # Optional: set a custom generator endpoint
   ASYNCAPI_GENERATOR_URL=https://generator.asyncapi.com
   

5. Run the development server:

   cd packages/studio
   pnpm install
   pnpm run dev
   # or: next dev
   

6. Build for production:

   pnpm run build:studio
   # or: next build
   

Public API

Editor

import { Editor } from '@/components/Editor';
// or from the barrel:
import { Editor } from '@/components';

The top-level editor composition component. Renders the Monaco-based AsyncAPI document editor with toolbar, validation output, and sidebar. Drop it into any Next.js page or layout that needs a full editing surface.

MonacoWrapper

import { MonacoWrapper } from '@/components/Editor';

interface MonacoWrapperProps {
  language: string;
  value: string;
  onChange?: (value: string | undefined) => void;
  // ...additional Monaco editor options
}

A thin wrapper around @monaco-editor/react pre-configured with AsyncAPI language support and theming. Use it when you need a standalone code editor surface without the full Editor chrome.

Content

import { Content } from '@/components';

Renders the main split-pane layout that hosts the editor on one side and the visualiser/documentation panel on the other. Use it as the primary page body component when building a full studio page.

Navigation

import { Navigation } from '@/components';

Top navigation bar with file controls, import/export menus, and settings access. Wire it above Content in your layout for a complete studio shell.

Dropdown (common)

import { Dropdown } from '@/components/common';

interface DropdownProps {
  label: React.ReactNode;
  children: React.ReactNode;
  // ...additional positioning/style props
}

A headless-style dropdown primitive used by all toolbar menus. Reuse it to extend the toolbar with custom actions without re-implementing the positioning logic.

Working examples

Scenario - Embedding the full Studio in a Next.js page

Drop the complete editor UI into an existing Next.js 14 App Router page with minimal wiring.

// app/editor/page.tsx
'use client';

import { Navigation } from '@/components/Navigation';
import { Sidebar } from '@/components/Sidebar';
import { Content } from '@/components/Content';

export default function EditorPage() {
  return (
    <div className="flex flex-col h-screen w-screen overflow-hidden">
      <Navigation />
      <div className="flex flex-1 overflow-hidden">
        <Sidebar />
        <Content />
      </div>
    </div>
  );
}

Scenario - Using MonacoWrapper as a standalone schema editor

Embed just the Monaco editor for editing a raw AsyncAPI YAML string inside a custom form.

'use client';

import { useState } from 'react';
import { MonacoWrapper } from '@/components/Editor';

const INITIAL_DOC = `asyncapi: '3.0.0'
info:
  title: My API
  version: '1.0.0'
channels: {}
`;

export function SchemaEditor() {
  const [doc, setDoc] = useState(INITIAL_DOC);

  return (
    <div style={{ height: 500 }}>
      <MonacoWrapper
        language="yaml"
        value={doc}
        onChange={(val) => val !== undefined && setDoc(val)}
      />
      <pre style={{ marginTop: 8, fontSize: 12 }}>{doc}</pre>
    </div>
  );
}

Scenario - Rendering a modal from the Modals barrel

Open the ImportURLModal programmatically to let users paste a remote AsyncAPI URL.

'use client';

import { useState } from 'react';
import { ImportURLModal } from '@/components/Modals';

export function ImportButton() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Import from URL</button>
      {open && (
        <ImportURLModal
          onClose={() => setOpen(false)}
        />
      )}
    </>
  );
}

Scenario - Using a common Tooltip in a custom toolbar button

'use client';

import { Tooltip } from '@/components/common';

export function SaveButton({ onClick }: { onClick: () => void }) {
  return (
    <Tooltip content="Save document to disk">
      <button
        onClick={onClick}
        className="px-3 py-1 bg-blue-600 text-white rounded"
      >
        Save
      </button>
    </Tooltip>
  );
}

File walkthrough

• src/app/layout.tsx - Root Next.js App Router layout; sets HTML metadata and global providers.
• src/app/page.tsx - Main studio page; composes navigation, sidebar, and content panes.
• src/app/api/v1/generate/route.tsx - API route that proxies or runs AsyncAPI Generator for template-based code generation.
• src/components/Editor/Editor.tsx - Full editor composition: Monaco + toolbar + validation output.
• src/components/Editor/MonacoWrapper.tsx - Configured Monaco editor instance with AsyncAPI language support.
• src/components/Editor/ConvertDropdown.tsx - Toolbar dropdown for converting between AsyncAPI spec versions.
• src/components/Editor/GenerateDropdown.tsx - Toolbar dropdown to trigger code generation via the API route.
• src/components/Editor/ImportDropdown.tsx - Toolbar dropdown exposing URL, UUID, base64, and folder import flows.
• src/components/Editor/SaveDropdown.tsx - Toolbar dropdown for save / save-as actions.
• src/components/Editor/ShareButton.tsx - Generates a shareable link encoding the current document.
• src/components/Modals/ - Self-contained modal dialogs for every discrete user action (import, convert, generate, settings).
• src/components/Popovers/SurveyPopover.tsx - Contextual popover prompting users for feedback.
• src/components/common/Dropdown.tsx - Base dropdown positioning primitive.
• src/components/common/Markdown.tsx - Markdown renderer with Mermaid diagram support.
• src/components/common/Switch.tsx - Accessible toggle switch input.
• src/components/common/Tooltip.tsx - Lightweight tooltip wrapper.
• src/components/Navigation.tsx - Top navigation bar.
• src/components/Sidebar.tsx - Left sidebar with file tree and navigation links.
• src/components/Content.tsx - Split-pane host for editor and visualiser panels.
• src/components/Toolbar.tsx - Horizontal toolbar housing all editor action dropdowns.
• src/state/ - Global state store (document content, UI flags, file tree).
• src/services/ - Parser, generator, and storage service abstractions.
• src/helpers/ - Pure utility functions: URL resolution, base64 encoding, ref traversal.
• src/examples/ - Bundled example AsyncAPI documents loaded on first launch.
• src/schemas/ - JSON Schema definitions for settings and configuration validation.
• src/types.ts - Top-level shared TypeScript interfaces.
• scripts/template-parameters.ts - Build-time script that extracts generator template parameters for the UI.
• cypress/ - Cypress E2E tests covering import, edit, and generate flows.

Common pitfalls and fixes

• Monaco editor SSR crash: @monaco-editor/react cannot run server-side; always import MonacoWrapper inside a 'use client' component or use next/dynamic with { ssr: false }.
• 'use client' missing on common components: The src/components/common/index.ts barrel declares 'use client' at the top; if you re-export these through a server component barrel you will get hydration errors. Keep them in client component trees only.
• Node.js version below 18.17: Next.js 14 App Router requires Node 18.17+; older versions silently fail during next build. Pin .nvmrc or engines field.
• PNPM workspace resolution: The upstream monorepo uses PNPM workspaces. If you integrate with npm or Yarn, ensure all internal workspace references in package.json are replaced with relative paths or published package versions.
• Missing NEXT_PUBLIC_ prefix on env vars: Values consumed in client components must be prefixed NEXT_PUBLIC_; server-only vars (e.g., generator service credentials) must not carry the prefix to avoid leaking them to the browser bundle.
• Tailwind purge missing source paths: If you move src/ to a non-standard location, update tailwind.config.js content globs to match; otherwise all utility classes will be purged and the UI will be unstyled.

Vibe-coding prompt template

I have the AsyncAPI Studio source code in the `source/` directory and its
integration guide in `USAGE.md`. The upstream project is `asyncapi_studio`
(no npm package; it is a Next.js application source).

My project is a [describe your stack, e.g., "Next.js 14 monorepo with Tailwind
and Zustand"]. I want to integrate the AsyncAPI Studio editor into my project.

Please do the following step-by-step:

1. Read `USAGE.md` and `source/src/components/index.ts`,
   `source/src/components/Editor/index.ts`, and
   `source/src/components/Modals/index.tsx` to understand all public exports.

2. Copy `source/src/` into `packages/studio/src/` in my project and add the
   package to my workspace.

3. Update my root `tsconfig.json` with the path aliases from `USAGE.md`.

4. Add all required dependencies from `USAGE.md` to my `package.json`.

5. Create a new route `app/editor/page.tsx` that renders the full Studio UI
   using the `Navigation`, `Sidebar`, and `Content` components, wrapped in a
   `'use client'` boundary.

6. Wire the `/api/v1/generate` route from `source/src/app/api/v1/generate/`
   into my Next.js API routes.

7. Add the necessary environment variables to `.env.local` as listed in
   `USAGE.md`.

8. Confirm there are no SSR issues with Monaco by checking that
   `MonacoWrapper` is only imported in client components.

Show me the exact file changes, new files, and any commands to run.

License and credit

The upstream license is not explicitly reproduced in the README excerpt; see source/LICENSE if present in the repository. The source originates from the AsyncAPI Studio open-source project maintained by the AsyncAPI Initiative. Check the repository for the current license (Apache-2.0 is typical for AsyncAPI projects).

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

Hướng dẫn cài đặt đầy đủ và prompt tích hợp sẽ mở khóa sau khi mua.

Swagger Editor Visual API Design Plugin

Automation, Utilities & Developer Tools

Miễn phí