// tsconfig.json (paths)
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@routes":         ["src/permify-playground/routes"],
      "@context/layout": ["src/permify-playground/context/layout"],
      "@pages/play":     ["src/permify-playground/pages/play"],
      "@pages/not-found":["src/permify-playground/pages/not-found"],
      "@state/shape":    ["src/permify-playground/state/shape"],
      "@/*":             ["src/permify-playground/*"]
    }
  }
}

3. For Vite, add equivalent resolve.alias entries in vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@routes':          path.resolve(__dirname, 'src/permify-playground/routes'),
      '@context/layout':  path.resolve(__dirname, 'src/permify-playground/context/layout'),
      '@pages/play':      path.resolve(__dirname, 'src/permify-playground/pages/play'),
      '@pages/not-found': path.resolve(__dirname, 'src/permify-playground/pages/not-found'),
      '@state/shape':     path.resolve(__dirname, 'src/permify-playground/state/shape'),
    },
  },
  worker: { format: 'es' },
});

4. Set environment variables if the playground calls a self-hosted Permify API:

VITE_PERMIFY_API_URL=http://localhost:3476
VITE_PERMIFY_TENANT_ID=t1

5. Mount Main as the React tree root:

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import Main from './permify-playground/main';

ReactDOM.createRoot(document.getElementById('root')!).render(<Main />);

Public API

Main

function Main(): JSX.Element

Top-level application shell. Wraps the entire tree in an Ant Design ConfigProvider with the Permify dark theme (colorPrimary: '#6318FF', darkAlgorithm), the layout context, React Router, and telemetry providers. Mount this once at the React root.

AppRouter

function AppRouter(): JSX.Element

Self-contained BrowserRouter with two routes: / renders <Play/> and * renders <NotFound/> inside the full layout. Drop this anywhere you want isolated routing; it does not need an outer BrowserRouter.

PermEditor

function PermEditor(props: { setCode: (value: string) => void; value?: string }): JSX.Element

Monaco editor preconfigured for the perm authorization DSL. Registers the perm language with Monarch token rules, a custom dark theme, bracket auto-close for {} and (), and keyword completion. Pass a setCode callback to receive schema changes; use it wherever you let users author entity / permission / relation definitions.

YamlEditor

function YamlEditor(props: { setCode: (value: string) => void; value?: string }): JSX.Element

Monaco editor for relationship tuple YAML. Activates monaco-yaml with completion, validation, formatting, and hover. Validation errors are written to the useShapeStore Zustand store (yamlValidationErrors). Use this to let users author or paste relationship data that will be sent to the Permify check/write API.

Visualizer

function Visualizer(props: {
  graph: {
    nodes: Array<{ id: string; label: string; type: 'entity' | 'operation' | string }>;
    edges: Array<{ from: { id: string; type: string }; to: { id: string; type: string } }>;
  }
}): JSX.Element

Renders a vis-network interactive graph. Operation nodes (OPERATION_UNION, OPERATION_INTERSECTION, OPERATION_EXCLUSION) are remapped to human labels (or, and, not). Edges from entity nodes render in purple. Use this to visualize the permission graph returned by the Permify schema expansion API.

Working examples

Scenario - Embedding the schema editor in an existing dashboard

You have a settings page and want to let admins edit the Permify authorization schema in-browser.

import React, { useState } from 'react';
import PermEditor from './permify-playground/lib/editor/perm';

export default function SchemaEditorPage() {
  const [schema, setSchema] = useState<string>(`
entity user {}

entity document {
  relation owner @user
  permission view = owner
}
`);

  async function saveSchema() {
    await fetch(import.meta.env.VITE_PERMIFY_API_URL + '/v1/tenants/t1/schemas/write', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ schema }),
    });
  }

  return (
    <div style={{ height: '80vh' }}>
      <PermEditor setCode={setSchema} value={schema} />
      <button onClick={saveSchema}>Save Schema</button>
    </div>
  );
}

Scenario - YAML relationship editor with live validation feedback

Use YamlEditor alongside the Zustand shape store to surface YAML errors before submitting tuples.

import React, { useState } from 'react';
import YamlEditor from './permify-playground/lib/editor/yaml';
import { useShapeStore } from './permify-playground/state/shape';

export default function RelationshipEditor() {
  const [yaml, setYaml] = useState<string>('');
  const { yamlValidationErrors } = useShapeStore();

  return (
    <div>
      {yamlValidationErrors && (
        <div style={{ color: 'red' }}>Validation error: {yamlValidationErrors}</div>
      )}
      <YamlEditor setCode={setYaml} value={yaml} />
    </div>
  );
}

Scenario - Rendering a permission graph from the Permify expand API

Fetch the expansion of a permission and feed it to Visualizer.

import React, { useEffect, useState } from 'react';
import Visualizer from './permify-playground/lib/visualizer';

interface GraphData {
  nodes: Array<{ id: string; label: string; type: string }>;
  edges: Array<{ from: { id: string; type: string }; to: { id: string; type: string } }>;
}

export default function PermissionGraph() {
  const [graph, setGraph] = useState<GraphData>({ nodes: [], edges: [] });

  useEffect(() => {
    fetch(`${import.meta.env.VITE_PERMIFY_API_URL}/v1/tenants/t1/permissions/expand`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        metadata: { schema_version: '', snap_token: '', depth: 20 },
        entity: { type: 'document', id: '1' },
        permission: 'view',
      }),
    })
      .then(r => r.json())
      .then(data => setGraph(data.tree)); // map API response to GraphData shape
  }, []);

  return <Visualizer graph={graph} />;
}

File walkthrough

• playground/src/main.js - Application root; configures Ant Design theme tokens and mounts the router and telemetry.
• playground/src/routes/index.js - Declares all client-side routes; exports AppRouter.
• playground/src/lib/editor/perm/index.js - Custom Monaco language definition and editor component for the Permify schema DSL.
• playground/src/lib/editor/yaml/index.js - YAML Monaco editor with schema validation wired to global Zustand error state.
• playground/src/lib/visualizer/index.js - vis-network wrapper that renders permission graph nodes and edges.
• assets/example-shapes/ - Ready-made YAML fixtures (RBAC, Notion, Instagram, etc.) you can load as defaults in the editor.
• proto/ - Protobuf service definitions; use with buf generate if you need typed gRPC clients.
• cmd/permify/permify.go - Go CLI entrypoint; irrelevant to the frontend but needed to run a local Permify server.
• internal/ - Go authorization engine; not imported by the frontend.
• pkg/ - Shared Go utility packages; not imported by the frontend.
• docs/ - Mintlify documentation source; not deployed with the playground.

Common pitfalls and fixes

• Monaco workers fail to load in Vite: Add optimizeDeps: { exclude: ['monaco-editor'] } and configure MonacoEditorWebpackPlugin or the Vite equivalent (vite-plugin-monaco-editor) to copy worker scripts.
• @-alias resolution fails at runtime: Every @context/layout, @state/shape, etc. alias must be declared both in tsconfig.json paths and in your bundler alias config; one without the other causes silent resolution failures.
• monaco-yaml version mismatch: monaco-yaml must be version-locked to match the monaco-editor version; mixing minor versions breaks the YAML worker.
• vis-network SSR crash: vis-network accesses window/document at import time; wrap Visualizer in a dynamic import (React.lazy or Next.js dynamic({ ssr: false })) when using SSR.
• Zustand store not found: useShapeStore is defined inside the playground's own state module; if you move files, update the import path in YamlEditor or the store will be a different singleton.
• Ant Design peer dependency: Ant Design v5 requires React 18. Using React 17 causes useId errors at startup; pin user@example.com if you cannot upgrade.

Vibe-coding prompt template

I have copied the Permify Playground source into `source/` in my project.
I also have `source/USAGE.md` which documents the real exports and setup steps.

My project is a React 18 + Vite + TypeScript application.

Please help me integrate the Permify Playground step-by-step:

1. Install all required npm dependencies listed in USAGE.md.
2. Configure Vite path aliases for all `@`-prefixed imports used in `source/playground/src/`.
3. Mount the `Main` component from `source/playground/src/main.js` as the application root.
4. Embed `PermEditor` from `source/playground/src/lib/editor/perm/index.js` in my existing
   settings page, wiring `setCode` to local state and adding a "Save Schema" button that
   POSTs to `VITE_PERMIFY_API_URL`.
5. Embed `YamlEditor` from `source/playground/src/lib/editor/yaml/index.js` and display
   `yamlValidationErrors` from the Zustand store above the editor.
6. Embed `Visualizer` from `source/playground/src/lib/visualizer/index.js`, fetching the
   expand API response and mapping it to the `{ nodes, edges }` prop shape.
7. Point out any Monaco worker configuration I need to add to vite.config.ts.

Use only the exports documented in USAGE.md. Do not invent any new APIs.

License and credit

Permify is licensed under the Apache 2.0 License (see source/LICENSE). It was originally developed by the Permify team and has been acquired by FusionAuth. Upstream repository: https://github.com/Permify/permify.

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

전체 설치 가이드와 연동 프롬프트는 구매 후 열람할 수 있습니다.