New project

“New project” makes a project from scratch and opens it on the canvas. midcode doesn’t have templates of its own: it runs the tool each framework’s community uses (create-next-app, create-vite, sv, ng, composer create-project…) with every question already answered, in a folder you choose.

Use it when there’s no project yet. If you already have one, open its folder.

Make a project

1. 1

   On the hub, click “New project”. With no projects yet, the same dialog is behind “Start a new project”. From inside a project, the + at the end of the tab strip or ⌘N (File → “New Project…”) goes to the hub with the dialog open; your tab stays open behind it.

2. 2

   Under “Built with”, choose the technology: React, Vue, Svelte, Angular, Solid, Astro, HTML, PHP, Python or Shopify.

3. 3

   Under “Start with”, choose the starter. The first one is marked “Recommended”.

4. 4

   Type a “Name”. It becomes the folder’s name, in lowercase with dashes: “My Site” makes my-site.

5. 5

   “Where” is the folder it’s made in. Click it to choose another. midcode remembers the last one; the first time it offers ~/Developer or ~/Documents.

6. 6

   If more than one package manager is installed, choose it under “Package manager” (pnpm, npm, bun or yarn).

7. 7

   Click “Create project”.

While it runs, the line at the bottom shows what the tool prints. “Cancel” stops it. The Node.js starters take about a minute. When it’s done, midcode says “my-site is ready” and opens the project in a tab.

Making a project needs a license or a running trial, like any edit.

Technologies and starters

“Node.js” means node, npx and at least one package manager on your shell’s PATH.

When something is missing, the dialog says what and links to where to get it: “This needs Node.js on your Mac”, “This needs Hugo on your Mac” (brew install hugo), “This needs PHP and Composer on your Mac” (Laravel Herd installs both), “This needs Python on your Mac”. Install it and come back. For Shopify, the dialog shows the card that installs the CLI or signs you in: see Shopify themes.

What each starter runs

Commands run in your login shell, with CI=1 so nothing stops to ask: the first in the “Where” folder, the rest inside the new project. <name> is the folder name and <pm> your package manager.

React

Next.js:

npx --yes create-next-app@latest <name> --typescript --tailwind --eslint --app --no-src-dir --import-alias "@/*" --turbopack --use-<pm> --yes

Vite:

npx --yes create-vite@latest <name> --template react-ts
<pm> install
<pm> add -D tailwindcss @tailwindcss/vite

React Router:

npx --yes create-react-router@latest <name> --yes --no-git-init --install --package-manager <pm>

Preact is the Vite recipe with --template preact-ts. With npm, the third line is npm install -D tailwindcss @tailwindcss/vite.

After a Vite template, midcode adds the Tailwind plugin to vite.config.ts, writes @import "tailwindcss"; as the stylesheet, and replaces the template’s demo with one plain page. This is what it adds to the config:

+import tailwindcss from '@tailwindcss/vite' import { defineConfig } from 'vite' import react from '@vitejs/plugin-react'  export default defineConfig({-  plugins: [react()],+  plugins: [react(), tailwindcss()], })

Vue

Nuxt:

npx --yes nuxi@latest init <name> --template minimal --packageManager <pm> --no-gitInit --no-modules
<pm> add -D tailwindcss @tailwindcss/vite

midcode then writes assets/css/main.css, app.vue and a nuxt.config.ts that loads the stylesheet and the Tailwind plugin. Vite is the same recipe as React’s, with --template vue-ts.

Svelte, Angular, Solid, Astro

SvelteKit:

npx --yes sv@latest create <name> --template minimal --types ts --add tailwindcss="plugins:none" --install <pm>

Angular:

npx --yes @angular/cli@latest new <name> --defaults --style=tailwind --ssr=false --skip-git --skip-tests --ai-config=none --package-manager <pm>

Astro:

npx --yes create-astro@latest <name> --template minimal --no-install --no-git --yes
<pm> install
npx --yes astro add tailwind --yes

Solid is the Vite recipe with --template solid-ts. In each of these the first page (src/routes/+page.svelte, src/app/app.html, src/pages/index.astro, src/App.tsx) is replaced with the plain starting page.

HTML

Plain HTML runs nothing. midcode writes three files: index.html, style.css and a .gitignore.

Eleventy is written by midcode too: a package.json with @11ty/eleventy and the scripts dev (eleventy --serve) and build, an eleventy.config.js that copies public/ to the site’s root, a layout in _includes/base.njk, index.njk and public/style.css. Then <pm> install.

Hugo:

hugo new site <name>

midcode adds the layouts (layouts/_default/baseof.html, single.html, list.html, and layouts/index.html) and static/style.css.

PHP

Laravel:

composer create-project laravel/laravel <name> --no-interaction --prefer-dist
<pm> install

The three kits are the same command with Laravel’s own starter kits: laravel/react-starter-kit, laravel/vue-starter-kit and laravel/livewire-starter-kit.

Python

Django:

python3 -m venv .venv
.venv/bin/python -m pip install --quiet --disable-pip-version-check django
.venv/bin/django-admin startproject config .

midcode then adds templates/base.html, templates/home.html and static/style.css at the top of the project, points config/settings.py at them (DIRS and STATICFILES_DIRS), routes / to the home template in config/urls.py, and writes requirements.txt.

Flask:

python3 -m venv .venv
.venv/bin/python -m pip install --quiet --disable-pip-version-check flask

midcode writes app.py with one route, the same two templates, static/style.css and requirements.txt.

Both get a virtual environment of their own in .venv. It’s what midcode runs the project with afterwards: see Django, Flask and FastAPI.

Shopify

Skeleton:

shopify theme init <name> --path <where>

Dawn:

shopify theme init <name> --path <where> --clone-url https://github.com/Shopify/dawn.git

A theme from your store:

shopify theme pull --store <store> --theme <id> --path <where>/<name>

For Dawn and Skeleton, “Store to work on it with” is optional (“Decide later”). For a theme from your store, choose the store and then the theme; the button reads “Download and open”. The store is saved in .midcode/shopify.json.

What you get

• –

  Tailwind 4, set up by the tool or by midcode, in every React, Vue, Svelte, Angular, Solid, Astro and Laravel starter. It’s what midcode writes styles with: see Tailwind CSS.

• –

  A plain stylesheet (style.css) in Plain HTML, Eleventy, Hugo, Django and Flask. There, style edits use midcode’s own utilities: see Without Tailwind.

• –

  One starting page where the tool’s own is a demo to delete: a heading, a paragraph and a button, ready to click.

• –

  TypeScript where the tool offers it.

• –

  A git repository. If the tool didn’t make one, midcode runs git init. There’s no commit and no remote: those are yours to make. A Shopify theme is left as the Shopify CLI makes it.

• –

  A .gitignore in the projects midcode writes itself (Plain HTML, Eleventy, Hugo, Django, Flask).

If the tool fails, or you cancel, the half-made folder is deleted and the dialog shows the tool’s last lines.

While the tools run, midcode sets NEXT_TELEMETRY_DISABLED, ASTRO_TELEMETRY_DISABLED, NUXT_TELEMETRY_DISABLED, NG_CLI_ANALYTICS=false and DO_NOT_TRACK=1.

Limits

• –

  There are no options beyond the ones in the dialog. For JavaScript instead of TypeScript, a src/ folder, or another template, run the tool yourself and open the folder.

• –

  The name is letters, digits and dashes. A folder with that name that isn’t empty is refused: “There’s already a folder named … there.”

• –

  A tool that runs longer than 15 minutes is stopped.

• –

  Qwik isn’t offered: the create-vite Qwik template doesn’t install today. A Qwik project made by hand opens and is edited like Solid.

• –

  Tried by creating and opening each one from midcode: Next.js 16, Vite + React, Vite + Vue (with pnpm), React Router, Astro, SvelteKit, Nuxt, Plain HTML, Angular 22, Vite + Solid and Vite + Preact. All of them came up editable on the canvas.

• –

  Eleventy, Hugo, Laravel, Laravel + React, Django and Flask were created and opened from midcode too.

• –

  Laravel + Vue and Laravel + Livewire were made with the same command run by hand, not from the dialog.