Showcase: Interactive Dev Components

Welcome to the future of developer blogging. We've built 5 advanced interactive components to make your technical content more engaging and useful.

1. Global Variable Sync#

Tired of telling users to "replace YOUR_API_KEY in 5 different places"? Use the Variable Sync system. Enter your values below, and watch them update site-wide!

[!TIP] Your key is: [Enter Key Above]. This value will reactively update in any code block or text using the <Var /> component.

How to use#

To implement reactive variables, wrap your content in the <VariableProvider> (automatically handles this in blog posts) and use these two components:

1. <VarInput />: Creates the input field.
   • name: The unique ID for the variable.
   • label: Display name above the input.
2. <Var />: Displays the value anywhere in your text.
   • name: Must match the input ID.
   • fallback: What to show before the user types anything.

1
<VarInput name="user" label="Username" />
2
Hello, <Var name="user" fallback="Guest" />!

2. Project Scaffolder#

The Tree component now generates an instant setup script. Click "Copy Script" and paste it into your terminal to recreate the structure below.

How to use#

The <Tree> component parses indented text into a visual folder structure and a downloadable script.

• Indentation: Use 2 spaces for each level.
• Folders: End the name with a / (e.g., src/).
• Highlighting: Add an asterisk * to the end of a filename to highlight it.
• Button: The "Copy Script" button automatically appears and generates mkdir -p and touch commands.

1
<Tree>
2
{\`root/
3
  folder/
4
    file.ts*
5
  config.json\`}
6
</Tree>

3. Mermaid Architecture Editor#

Static diagrams are a thing of the past. View the architecture below, and if you want to experiment, click Edit to change the logic in real-time.

How to use#

The <MermaidEditor /> component renders diagrams using the Mermaid.js syntax.

• code: Pass the mermaid logic inside a template string.
• Interaction: Users can toggle between "View" and "Edit" modes.
• Error Handling: If the user writes invalid syntax in Edit mode, a clean error panel appears instead of crashing the site.

1
<MermaidEditor code={\`graph TD
2
  A[Start] --> B[End]\`} />

4. Live API Pinger#

Test your endpoints directly from the blog post. This pinger captures the real flow: Handshake -> Transfer -> Response.

How to use#

Use the <ApiPinger /> to document APIs that readers can actually test.

• url: The default endpoint to ping.
• method: Defaults to GET, but supports POST, PUT, etc.
• Output: Renders a clean JSON preview of the response or a detailed error message if the fetch fails.

1
<ApiPinger url="https://api.example.com/v1" method="GET" />

5. JSON Explorer#

Stop dumping massive JSON payloads into text. The JSON Explorer provides a searchable, collapsible, and high-performance viewer.

How to use#

The <JsonExplorer /> is perfect for deep-diving into complex objects.

• data: Pass a standard JavaScript object.
• title: The text displayed in the header bar.
• highlight: (Optional) Provide a dot-notation path (e.g., profile.social.github) to auto-expand and highlight that specific node on load.
• Filtering: Includes a built-in search bar for users to find keys/values in large payloads.

1
<JsonExplorer
2
  title="User Profile Response"
3
  highlight="profile.social.github"
4
  data={{
5
    id: "user_8829",
6
    username: "0x1da49",
7
    profile: {
8
      bio: "Building the next generation of developer tools.",
9
      avatar: "https://github.com/0x1da49.png",
10
      social: {
11
        github: "https://github.com/0x1da49",
12
        twitter: "@0x1da49"
13
      }
14
    },
15
    settings: {
16
      theme: "dark",
17
      notifications: true
18
    }
19
  }}
20
/>

Conclusion#

These components are designed to reduce cognitive load and make learning more interactive. Enjoy building with the Base Dev boilerplate!