FREE FRAMER COMPONENT

CodeTabs

A tabbed code block with lightweight syntax highlighting, optional line numbers and a copy button. Up to six tabs, each with its own label and code. Colors, font and radius are property controls.

Three languages

line numbers · copy button

1import { Hookline } from "@hookline/sdk"
2 
3const hooks = new Hookline({ apiKey: process.env.HOOKLINE_KEY })
4 
5await hooks.send({
6  event: "invoice.paid",
7  payload: { invoiceId: "inv_1042", amount: 4900 },
8})

Light theme, install command

custom colors · no line numbers

npm install @hookline/sdk

Single tab

comments · numbers · strings

1// Rotate secrets without downtime
2export const config = {
3  retries: 5,
4  backoff: "adaptive",
5  signatureTolerance: 300, // seconds
6}

Property controls

tabs – up to 6 items, each with a label and code

lineNumbers – show or hide line numbers

copyButton – copy the active tab’s code to the clipboard

font, radius, background, header, border, text, muted, activeTab, accent colors

keyword, string, number, function and comment colors for highlighting

FREE COMPONENT · FROM THE HOOKLINE TEMPLATE

Want the whole site around it?

Hookline is a developer tool landing template with 13 pages, CMS blog and changelog, dark mode and 7 code components like this one. Install this component free, or get the full template.

Get Hookline · $49

See the template

Buy this template

$49