DOCSEARCHbyAlgolia
Submit Docs

Presetter Documentation

website·Indexed 29 days ago

https://presetter.dev

A tool for standardizing development environments and AI agent setups across repositories using opinionated configuration presets. It provides specialized presets for TypeScript, Node.js, Bun, React, ESM, and CommonJS, and includes a CLI for running scripts sequentially or in parallel. Features include support for monorepos, custom preset creation, and migration paths from Create React App (CRA).

Tokens
39.3K
Snippets
242
Records
312
Agent score
53%

What's inside Presetter

  1. Overview of Custom Presetter Presets

    Custom Presetter presets allow organizations to encapsulate team standards, tool configurations (like ESLint and TypeScript), and workflows into a single versioned package. This enables consistent tooling across all projects, simplified onboarding, and the ability to update all projects by updating a single preset package. They are particularly useful for sharing coding-agent setups (e.g., CLAUDE.md instructions, MCP definitions, and plugin lists) across repositories to avoid manual copying.

  2. Overview of Presetter Configuration Management

    Presetter is a TypeScript-based configuration management system designed to eliminate the manual copying and updating of configuration files across multiple projects. It provides a centralized way to manage build tools and development environments, ensuring consistent tooling and simplified updates through preset versioning.

  3. Overview of @presetter/preset-node

    @presetter/preset-node is an opinionated preset designed for building Node.js applications, backend services, CLIs, and server-side libraries. It extends @presetter/preset-essentials, inheriting its defaults for TypeScript, ESLint 9, Prettier 3, Vitest 4, Husky, lint-staged, git-cliff, and zx. Its primary purpose is to surface Node.js ambient types (such as process, Buffer, and fs) so they type-check out of the box without manual wiring.

  4. Overview of @presetter/preset-web

    @presetter/preset-web is a focused browser layer that provides browser-aware generated configuration. It does not extend @presetter/preset-essentials and does not include Storybook; it should be composed with other presets (like TypeScript, React, or Next.js) as needed.

    Key features include:

    • Extends tsconfig.json with DOM, DOM.Iterable, and ESNext libraries.
    • Adds browser globals to ESLint via globals.browser.
    • Integrates eslint-plugin-better-tailwindcss for TailwindCSS linting, automatically discovering entry and config files.
    • Generates image and stylesheet module declarations in a configured types directory and adds them to .gitignore.

  5. Overview of Presetter configuration management

    Presetter is a configuration management system designed to eliminate the manual process of copying configuration files (like .eslintrc.js, tsconfig.json, and vitest.config.ts) and managing dev dependencies across TypeScript projects. It uses a preset-based approach to set up the development environment via a single command, ensuring consistency across multiple projects.

  6. Overview of @presetter/preset-bun

    @presetter/preset-bun is a standalone, opinionated preset for building applications and libraries that run on Bun. Unlike many other presets, it does not extend @presetter/preset-essentials to avoid conflicts with Bun's built-in toolchain (bundler, test runner, and transpiler). It provides automatic typing for Bun APIs (e.g., Bun.serve, Bun.file) and configures build scripts to use bun build.

  7. Manage AI agent configuration drift with Presetter

    AI coding agents rely on various configuration files (e.g., CLAUDE.md, AGENTS.md, .mcp.json, .claude/settings.json) that often drift across repositories when copy-pasted. Presetter solves this by allowing teams to define a shared baseline in a versioned preset package. Repositories compose this preset in a presetter.config.ts file, which then generates the actual files the agent tools expect on disk. This ensures shared rules are intentional and differences are explicit overrides.

  8. New Presets and Features in Presetter v9

    v8-to-v9

    Presetter v9 introduces several new standalone presets and CLI features:

    New Presets:

    • @presetter/preset-node: Node-tuned TypeScript configuration.
    • @presetter/preset-bun: Configuration for Bun projects.
    • @presetter/preset-storybook: Storybook configuration with a11y and Vitest browser testing.

    New Features:

    • presetter bootstrap --packages: Bootstrap by package-name glob.
    • Built-in lint-staged pre-commit and pre-push hooks.
    • git-cliff for changelog generation.
    • Monorepo sub-level Vitest configuration support.

  9. Install Presetter presets based on project type

    Install the presetter core package along with the preset that matches your project architecture using pnpm.
    # For TypeScript Libraries
pnpm add -D presetter @presetter/preset-essentials

# For React Applications
pnpm add -D presetter @presetter/preset-react

# For ES Module Libraries
pnpm add -D presetter @presetter/preset-esm

# For Monorepos
pnpm add -D presetter @presetter/preset-monorepo

  10. Choose a module system preset for Presetter

    Presetter provides specialized configurations to handle different JavaScript module formats and compatibility requirements. Depending on the target environment, you can use one of the following presets:

    • @presetter/preset-esm: Used for modern ES Modules development.
    • @presetter/preset-cjs: Used for CommonJS modules, primarily for Node.js and legacy compatibility.
    • @presetter/preset-hybrid: Used for dual CommonJS/ESM package delivery to ensure maximum compatibility across different environments.

  11. Select a Presetter preset by project type

    Choose a recommended preset based on your project's architecture and requirements:

    Project TypeRecommended PresetAdditional Options
    Modern TypeScript App@presetter/preset-esm+ strict for quality
    NPM Library@presetter/preset-hybrid+ rollup for bundling
    React Application@presetter/preset-reactAdd web for browser globals
    Node.js Service or CLI@presetter/preset-node+ esm + strict
    Bun Service or CLI@presetter/preset-bunStandalone (no essentials)
    Legacy Node.js@presetter/preset-cjs+ strict for quality
    Monorepo@presetter/preset-monorepoIncludes essentials + strict
    Web Frontend@presetter/preset-webBrowser globals + TailwindCSS linting

  12. Update to Presetter v9 and new preset scopes

    Presetter v9 introduces a modernized toolchain and a reorganized preset ecosystem. All presets have been moved to the @presetter/* scope. This version establishes TypeScript 6 as the public baseline and introduces three new presets: node, bun, and storybook.