Marketplace

The marketplace is a shelf of things made for midcode. There are three kinds:

• –

  A starter is a whole first page with a point of view: a set of sections that belong together. A new project can begin with it.

• –

  A section (or a smaller component) is one piece of plain markup with Tailwind classes. Adding one writes that markup into your page.

• –

  A prompt is a piece of writing for your coding agent. midcode puts it in the Agent panel for you to read, change and send.

Everything listed is free. The list is at midcode.app/marketplace.

Begin a project with a starter

1. 1

   On the hub, click “Marketplace” at the bottom of the sidebar.

2. 2

   Under “Starters”, each card shows the starter’s page from the top. Click “Use this starter”.

3. 3

   “New project” opens with a line that says which starter it starts with. Choose the framework, a name and a place, as in New project, and click “Create project”.

midcode makes the project with the framework’s own tool, then writes the starter’s sections as the first page, in place of the plain page a new project otherwise gets. It opens on the canvas, and every section is yours to edit.

A starter can begin a project made with Next.js, Vite (React, Vue, Preact or Solid), SvelteKit, Astro or Nuxt: the ones “New project” sets up with Tailwind 4. With a starter chosen, the dialog offers only those.

What gets written, in a Vite + React project:

export default function App() {
  return (
    <main className="bg-[#0a0a0b] font-sans antialiased">
      <header className="bg-[#0a0a0b] px-4 pt-4 text-[#f2f2ef] sm:px-6 sm:pt-5">
        …
      </header>
      <section className="relative overflow-hidden bg-[#0a0a0b] text-[#f2f2ef]">
        …
      </section>
    </main>
  )
}

In Next.js it’s app/page.tsx. In a Vue, Svelte or Astro project the same markup is written as HTML (class, not className).

Add a section to a page

1. 1

   Open a project and click the + of the floating toolbar. The Insert panel opens.

2. 2

   Scroll to “Marketplace”, after “Components”. Each item shows a live picture of what it writes, with who made it.

3. 3

   Click an item, or drag it onto the canvas.

A section lands the way the Insert panel’s own sections do: next to the page’s top-level block that holds the selection, or at the end of the page with nothing selected. Insert has the whole rule. The search at the top of the panel finds marketplace items too.

One ⌘Z takes it out again, and it shows in Publish like any other edit.

The sections of a starter are listed one by one, so you can take the hero of one and the pricing of another. Each carries its own background and text color.

It’s fitted to the project the same way as the panel’s own items:

• –

  In a Svelte, Vue, Astro or HTML file it’s written as HTML.

• –

  In a project without Tailwind the classes are written with midcode’s prefix (mid:py-24) and their CSS goes to midcode.css. See Styling without Tailwind.

• –

  An item that shows an image uses the placeholder, written once to public/midcode/placeholder.svg.

Nothing is installed, and nothing stays linked to the marketplace: after it’s written, it’s your code.

Hand a prompt to your agent

In the Insert panel, under the marketplace’s sections, “Prompts” lists them by name. Click one and the right panel turns to its “Agent” tab (Your agent in midcode), with the prompt attached to what you’re about to send. Nothing is sent yet: read it, add your own line (“the product is…”), and send it yourself.

A prompt that says “the element I selected” means the selection on the canvas: select first, and send the selection along with @ in the prompt bar.

On the hub’s Marketplace and on the site, a prompt has a copy button, to paste it into any agent.

What an item can be

midcode checks every item itself each time it reads the list, whatever the site says.

A section or a component is one element of static JSX:

• –

  HTML and SVG tags only. No components, no <script>, <iframe>, <object>, <link> or <style>.

• –

  Attributes are plain text, a number (rows={4}) or {false}. No expressions, no spreads, no style, no event handlers.

• –

  Between tags, text and {' '} only.

• –

  A link points to #, a path on the site, mailto:, tel: or an https:// address. A form’s action is #.

• –

  The only image is /midcode/placeholder.svg. A class can’t load anything either: one that carries a url( or an image-set( of its own is refused.

So a section can’t run code, in midcode or in your site, and can’t call out to anywhere.

A starter is only the names of its sections, plus the classes of the page around them. If one of its sections isn’t in the list, or doesn’t pass, the starter isn’t offered.

A prompt is plain text, up to 8,000 characters. midcode removes control characters and the invisible ones (zero-width characters, direction overrides), so a prompt can’t say something you don’t see. It still asks an agent to change your code: read it before you send it, as you would anything you paste into an agent.

Where the list comes from

midcode reads https://midcode.app/marketplace/index.json when the Insert panel or the hub’s Marketplace opens, at most every ten minutes. It keeps the last copy in its own data folder (~/Library/Application Support/midcode/marketplace.json), so what you saw once is there offline. Nothing about you or your project is sent: it’s one GET for a public file.

The pictures are drawn on your Mac from each item’s code, with plain Tailwind 4.

Make one

An item is a folder. Its name is its address: lowercase words with dashes.

A section:

{
  "name": "Onyx hero",
  "description": "A big headline over a product window drawn in markup, on near-black",
  "kind": "section",
  "author": { "name": "Your name", "url": "https://your.site" },
  "tags": ["dark", "hero", "saas"],
  "license": "MIT"
}

with its markup in code.jsx, one element, under 40,000 characters. Its outer element can’t be absolute, fixed or sticky (inside it, anything can sit over anything), and nothing in it is fixed.

A starter has no code of its own:

{
  "name": "Onyx",
  "description": "A dark launch page for a product: near-black, warm white and one lime accent",
  "kind": "starter",
  "author": { "name": "Your name" },
  "tags": ["dark", "saas", "landing"],
  "license": "MIT",
  "page": "bg-[#0a0a0b] font-sans antialiased",
  "sections": ["onyx-nav", "onyx-hero", "onyx-features", "onyx-pricing", "onyx-footer"]
}

A prompt is item.json with "kind": "prompt" and its text in prompt.md.

What makes a good one:

• –

  Give a starter one palette, one way with type and one accent, and give every section its own background and text color so it also works alone.

• –

  Where a screenshot would go, draw a piece of the product in markup (a list, a chart made of bars, a window) instead of a gray box.

• –

  Finish it: balanced headlines, concentric corner radii, a ring or a soft shadow instead of a hard border, hover and pressed states on what can be clicked.

Send it from midcode.app/marketplace: “Submit yours” opens an issue on midcode’s public repository, where you paste the files or attach the folder. Every item is reviewed before it’s listed, and listed under your name.

Limits

• –

  A starter is one page. It doesn’t bring more pages, components with behavior, fonts or images.

• –

  A starter begins a new project. To use one in a project you already have, add its sections one at a time from Insert.

• –

  Everything is free. There’s no way to sell an item yet.

• –

  Sections are written for Tailwind 4.

• –

  Tried: a Vite + React project and a Next.js project made from a starter (both build; the first also opened on the canvas at every breakpoint), and a section inserted into a plain HTML site and undone. The other frameworks a starter can begin go through the same code and were not each tried.

• –

  A prompt reaching the agent was tried up to the Agent panel opening with it; what an agent builds from it depends on the agent.