Framer code component · by Atlas Creative

API Explorer & SDK Console

An interactive API console for your docs site. Tweak a parameter, watch the code and response update live.

Get it for $119

No dependencies · No backend · cURL, TypeScript, Python & Go

Endpoints

Create chat completion

Generate a model response for a conversation. Drag the sliders and watch the code update.

modelselect

messagesstring

temperaturenumber0.7

max_tokensnumber256

streamboolean

curl -X POST "https://api.domain.com/v1/chat/completions" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "model": "acme-large",
  "messages": [
    {
      "role": "user",
      "content": "Explain rate limiting in one sentence."
    }
  ],
  "temperature": 0.7,
  "max_tokens": 256,
  "stream": false
}'

POST/chat/completionsnot sent

No response yet

Press Send Request to simulate this call. Nothing leaves your browser.

Live preview. Pick an endpoint, drag a slider, hit Send Request.

Why it exists

Stop sending developers to a wall of static code blocks.

API Explorer & SDK Console drops a working, interactive API reference straight into your Framer site. Visitors choose an endpoint, change a parameter, and the request, the code sample and the response all update together. When it looks right, they copy the snippet and ship.

It is a single self-contained code component. No packages to install, no server to run, no keys to expose. Everything is configured from the Framer properties panel.

Built for

Developer tools & API-first startups

Launching docs or a product site in Framer.

Agencies

Building developer marketing pages for SaaS clients.

Founders

Who want a live “try it” moment on a landing page without an engineering sprint.

Features

Everything a developer expects from a real API console.

Three-column console

Endpoints on the left, parameters and request in the middle, code and response on the right, in a dark theme developers already trust.

One source of truth

Params, generated code and response stay in sync. Change one value and everything follows.

Four SDK snippets

cURL, TypeScript, Python and Go, generated from your endpoint config with correct quoting, headers and body handling.

Send Request simulator

A realistic loading state and a response panel with status, timing and syntax-highlighted JSON. Perfect for demos, with no live calls made.

Built-in syntax highlighting

A lightweight tokenizer colors strings, numbers, keys and keywords with no external library.

Three presets

Start from a ready-made layout and edit from there.

Two layouts

Full three-column for desktop, a stacked layout for narrow spaces.

Fully controllable

Endpoints, parameters, default language and layout are all exposed as Framer property controls.

Zero dependencies

One file, nothing to maintain, nothing that breaks on update.

How it works

From canvas to live console in four steps.

Drag the component onto your canvas.

Open the properties panel and define your endpoints and parameters.

Pick a preset, a layout and a default language.

Publish. Visitors can explore, copy and send right away.

Pricing

One payment. One component.

Includes the ApiExplorer code component with full property controls, three presets and two layouts, plus setup notes for defining endpoints and parameters.

API Explorer & SDK Console

$119

one-time

The interactive API console for your Framer docs or product site.

ApiExplorer code component with full property controls

Three presets and two layouts

Setup notes for defining endpoints and parameters

Get it for $119

API

Developer Tools

Documentation

Code

Interactive

SDK

SaaS

Component

Questions or custom endpoints? Reach out to Atlas Creative through the Framer Marketplace listing page.