About CodeKit
CodeKit is a native macOS app that watches a web project folder and compiles Sass, Less, Stylus, TypeScript, JavaScript, Pug, Haml, Slim, Kit, and Markdown on save, optimizes images, and refreshes every connected browser. It replaces hand-written Webpack, Gulp, or npm-script build setups with checkboxes, adds a GUI for npm, and ships a command-line tool that AI coding agents can drive. It is made by Incident 57, a one-person company run by Bryan Jones, and has shipped since 2011.
Pros & Cons
Pros
- No configuration files: drag a folder in and compiling, bundling, and image optimization work immediately
- One-time price with no subscription, and older versions keep working after updates lapse
- Native Swift app rather than Electron, with a broad bundled toolchain (Dart Sass, TypeScript 7, Rollup, Babel, ESLint, PostCSS)
- Preview server refreshes and syncs every phone, tablet, and browser on the network
- CLI and agent skill file let AI coding agents drive builds without MCP servers or plugins
- Actively maintained since 2011 with frequent, documented component updates
Cons
- macOS only, with no Windows or Linux version planned
- Not suited to framework single-page apps (React, Vue, Next.js, SvelteKit) that rely on their own dev server
- Cannot run as a headless compiler on a Linux CI server
- Does not expose Webpack-style loaders or plugins for highly custom pipelines
- Built by a one-person company, which concentrates support and roadmap on a single developer
Key Features
Zero-config compiling
Compiles Sass (Dart Sass), Less, Stylus, TypeScript, CoffeeScript, Pug, Haml, Slim, Kit, and Markdown automatically whenever you save a file.
JavaScript bundling and minifying
Bundles scripts with Rollup, transpiles with Babel, minifies with Terser, and checks syntax with ESLint, all set from in-app controls.
CSS post-processing
Runs Autoprefixer, PurgeCSS, LightningCSS, and any PostCSS plugin you install on compiled stylesheets.
Image optimization
Lossless and lossy optimization for PNG, JPEG, and GIF, SVG optimization with SVGO, and WebP export.
Live preview server
Built-in server refreshes every browser on every device when files change, supports TLS, and syncs clicks, scrolling, and form input across devices.
Graphical npm manager
Search, install, update, and remove npm packages from a GUI, with one-click installers for Tailwind CSS, Bootstrap, and Foundation.
AI agent CLI
A built-in codekit command-line tool exposes nearly everything in the UI, and an Install Agent Skills command lets agents such as Claude Code or Codex compile, build, and preview without setup.
Build steps and hooks
Run shell or AppleScript commands on matching files, define build steps, set environment variables, and add custom file extensions.
Git-friendly project settings
All project settings live in a single file you can commit, so teams and agencies share the same setup across machines.
Pricing
- Full app for 10 days
- No account required
- Switches to read-only mode afterwards (compiling and refreshing keep working)
- Use on up to 3 Macs as the sole user
- 13 months of free updates
- Versions released during that window stay unlocked forever
- Optional paid renewal for more updates
- Priced per user with volume discounts
- Add users to an existing license
- 13 months of free updates
- Invoice details such as VAT ID supported
Best For
Marketing and static sites
Front-end developers compile Sass, Kit, and bundled JavaScript for brochure, landing, and documentation sites without maintaining a build config.
CMS theme development
Build the CSS, JavaScript, and image assets for WordPress, Craft, Laravel, Rails, or Django themes while previewing changes live.
Cross-device testing
Preview a site on phones and tablets at once, with every device refreshing and syncing scroll and clicks on save.
Agency project consistency
Freelancers and agencies share one committed settings file so every project and teammate uses the same build setup.
AI-agent web builds
Developers using Claude Code or Codex give the agent a ready build tool it can operate through the codekit CLI.
Similar Tools
Kraken.io
Ultra-fast image optimizer with best-in-class compression algorithms
Big Hairy Goal
Free-flow mind-mapping and task tracking for macOS and iOS
egghead.io
Expert-led courses for professional front-end web developers
Liveweave
Generative AI code editor and HTML, CSS, JS playground
QuiKey
Your macOS right-click menu, supercharged.
Growmodo
Scale your agency without hiring