Create Preset
Create Preset toolbox logoCreate PresetOne source. Your presets.

Similar templates.
Separate copies? No!

Maintain shared code once. Describe the differences in a preset, then select files and apply changes when creating each project.

Best practices Get Started
create-preset on npmExamples GitHub
starter/Maintain once

src/main.ts

src/analytics.ts

package.json

basic.json

Basic edition

src/main.ts

src/analytics.ts −

team.json

Team edition

src/main.ts

src/analytics.ts

Edit shared code once. Keep edition differences in config.

SOURCE → PRESET → PROJECT

Less repetition in your workflow

Choose a scenario to see what happens to the files.

Almost identical templates, maintained separately?

Manual upkeepKeep separate copies for basic and team editions. Check and fix the same code in every copy.

With Create PresetKeep one source. Describe the file and config differences in presets and generate the edition needed.

app-starter
01

Source files

app-starter/
  • starter/src/main.tsEdited
  • starter/src/analytics.tsExcluded
  • starter/package.jsonEdited
src/main.ts
import { track } from './analytics'
 
track('app-started')
console.log('Hello')
02

Preset rules

basic.json / Config excerpt
{
  "source": {
    "directory": "starter"
  },
  "exclude": [
    "src/analytics.ts"
  ],
  "replace": [
    {
      "path": "src/main.ts",
      "from": "import { track } from './analytics'\n\ntrack('app-started')\n",
      "to": ""
    }
  ]
}
03

Generated files

2 files
my-basic-app/
  • src/main.tsEdited
  • package.jsonEdited
src/main.ts
console.log('Hello')
Amber marks content to changeGreen marks rewritten lines
Bash
pnpm create preset init my-basic-app --from ./presets/basic.json

Fictional repository · Commands are not run in the browser

Explore the example

  • Practicality

    Supports everything from starter templates to complex projects.

  • Efficient

    Reduces repetitive configuration processes every time a new project is created.

  • Interactive

    Simple command-line interactive operation.

  • Multi-Tech Stacks

    Provide commonly used multiple technology stack project support.

  • Project customization

    Use the same template to create projects with different configurations.

  • Private Configuration

    Manage private project sources in a local config.

Try it out

Run one of the following commands and follow the prompts.

Bash
pnpm create preset

A look at the CLI

Vue offers the official Vue starter and Nuxt.

$ pnpm create preset

create-preset
Create projects with official generators and declarative presets.

Project name: my-preset-app
Select a tech stack: Vue
Select a preset:
❯ Official Vue Starter ↗
  Nuxt ↗
Vue options in Create Preset 1.0.
Get Started