Build websites faster and better. Great software for your Mac!

What's new in this version:
CodeKit 3.13.3
New WebP Image Optimization:
- WebP is a Google image format that's 50-70% smaller on disk than JPEG or PNG
- CodeKit can now automatically export a WebP version of any PNG, JPEG, or GIF-even animated GIFs
- Complete control over all 8,000 WebP Optimizer settings, neatly organized into "Presets"
- CodeKit adds WebP support system-wide, so you can view WebPs (ugh) in Finder and via QuickLook
- Read the documentation or watch the screencast to get up to speed
New Nova Extension:
- Nova is a new NATIVE Mac editor by Panic
- It does not suck
- This extension automatically launches CodeKit and adds your Project to the app whenever you open it in Nova, saving you time and hassle
- Install the Extension by downloading it or via Nova's Extension Library
- I am slightly miffed that Nova's first-run screen is now cooler than mine. I will escalate this fight until GPUs set houses on fire, Panic
Changed:
- The UI has been updated for Big Sur
- The thumbnail at the top of the image inspector is now much more performant
- The AppleScript API has a new method to refresh a Project
- The core task-dispatching part of CodeKit is now written in Swift and builds got about 12% faster as a result
Fixed:
- Certain textfields magically warped colors when edited in Dark Mode
- An issue where a "Run Script" Build Step might not save its script source correctly
- Edge didn't show up in the list of browsers because Microsoft changed its bundle identifier
- An edge-case memory leak in the Sass import scanner
- 3.13.2 fixes a bug in 3.13 where files set to "copy" would hang indefinitely and a bug where the "file-watching is paused" banner failed to show
CodeKit 3.10.2
New:
The Kit @Compile Statement:
- Works like @import, but compiles the file first.
- Example: @compile 'someFile.md' will compile 'someFile.md' and drop the output in place.
- Works with any file CodeKit supports, including custom file types you add to the app.
- For details, watch this screencast or read the documentation.
Image Comparison Tool:
- You know how every fall all the blogs are like, "The Pixel 67 clearly takes better photos than the iPhone 24 Pro Max. I mean, just look at my child's hair by candlelight. LOOK AT MY CHILD! LOOK AT IT!"
- You know how those blogs have little sliders you can drag to compare the same photo from iPhone-whatsit and Android-dontcare?
That's now in CodeKit:
- a screenshot of the image compare tool in CodeKit
- If your Project uses a Build Folder (so the image doesn't overwrite itself when optimizing), you can instantly compare the original and optimized versions. Select the file and hit the space bar or double-click the preview thumbnail in the Inspector
Other New Stuff:
- Custom Environment Variables — Set them in the General section of Project Settings. They're available in all Hooks, Build Steps, and most of the tools CodeKit runs (including Babel, Rollup, etc.). See the documentation
- Libsass Globbing — Sass globbing is now supported when using the Libsass compiler (Even multi-level globbing)
- Rollup Options — You can now specify external modules, enable/disable Treeshaking, and force string replacements when bundling. See the documentation.
Changed:
- PNGQuant is now multi-threaded and optimizes large PNGs faster
- If you're still running macOS 10.11 or 10.12, you'll see a warning when CodeKit launches. Parts of the UI won't look right because of bugs in those ancient OS versions
Fixed:
- Output Paths weren't editable sometimes because Swift is a pedantic ass
- "Run Script" Build Steps sometimes failed if they appeared at the end of the Build process
- Links to ESLint rules in the Log didn't work because Swift is a pedantic ass
- Sass @debug statements weren't working due to a change in Libsass
- ESLint wasn't working for some people in the original 3.10 release
CodeKit 3.10.1
- Change log not available for this version
CodeKit 3.9.2
- 3.9.2 fixes issues where TypeScript files failed to compile and npm packages with names shorter than 4 characters didn't show up in search results
Quick Fix:
- 3.9.2 fixes issues where TypeScript files failed to compile and npm packages with names shorter than 4 characters didn't show up in search results
NEW: npm!:
- The 'Components' area of CodeKit has been 100% rebuilt from scratch
- It's WAY better. Faster, smoother, sexier. It's like Scarlett Johnasson, Ryan Reynolds, and Rachel McAdams had a sleepover with jQuery
- This is the nicest thing anyone has ever said about jQuery
- npm is now the default package manager
- The old UI was terrible. I'd say I can't believe you put up with that garbage, but you've probably got Slack's app running right now, don't you?
- Bower is still fully supported. You can switch to it at any time, it uses the same new UI, and I even gave it new features. (Bower is deprecated by the developer, but it will be in CodeKit as long as it exists.)
- There are SO many new features: uninstalling, pruning, viewing changelogs in one click, breaking/non-breaking update warnings, custom endpoint installations, installing from a package.json file...
- Watch this 5-minute screencast to get up to speed fast. Or read the documentation
NEW: Notification Control:
- You can now control exactly when CodeKit posts notifications, beeps, and comes to the front
- See Preferences > Notifications
- It was not possible to migrate your old options to this new system
Other New Stuff:
- Builds are 32% faster
- The log design has been tweaked. (It's not the sexy sleepover that the new npm interface is, but it's not Gary Busey either.)
- Added the Babel UseBuiltIns and excludePaths options to the UI. (You can now control polyfills and transpile items in node_modules folders.)
- New project icons
- The "Open With" menus now include Terminal as an option
- You can now force CodeKit to always reload the entire page, even when just CSS files change. (Useful for Shopify developers.) See Project Settings > Browser Refreshing
- CodeKit is now notarized by Apple for security
Changed:
- CodeKit now attempts to keep its window the same size. Previously, when you switched sections, the app restored the last known size for that section
- CodeKit now supports full screen
- Windows are now much more fluid when resizing/animating
- Pages that do not have a or tag will now auto-refresh as long as they are HTML files
- Previously, CodeKit would use up to 8 CPU cores during builds. If your Mac has more than that, CodeKit will now use them all
Fixed:
- An issue where JS files with @codeKit statements wouldn't compile un-minified
- An issue where the Project Icon Picker wouldn't display icons sometimes
- An issue where browsers might hang and refuse to load the page if you switched the Preview Server from TLS to non-TLS
macOS Catalina:
- I don't officially support macOS betas, but folks tell me CodeKit is working fine on 10.15. This update is fully notarized and should be ready for Catalina
Major Component Updates:
- Autoprefixer 9.6.1
- RollupJS 1.17.0
- TerserJS 4.1.2
- Babel 7.5.5
- Libsass 3.6.1
- Browserslist 4.6.6
- TypeScript 3.5.3
- ESLint 6.1.0
- SVGO 1.3.0
- HTML-Minifier 4.0.0
- CoffeeScript 2.4.1
- Node 10.16.0
CodeKit 3.9.1
- Change log not available for this version
CodeKit 3.8.2
- Fixes a crash that occurred when scanning malformed Bower packages for import statements
CodeKit 3.8.1
- Fixes an issue in 3.8 that caused crashes with the Projects Sidebar open
CodeKit 3.7.4
Sass and CSS:
- The last update made it impossible to import CSS files into Sass files
- The Sass team decided to roll back that change
- This update restores the ability to @import CSS files. To have their content added to your Sass file, make sure your import statement does NOT include the .css extension
Fixed:
- The browserslist label on the AutoPrefixer pane of Project Settings didn't update correctly
CodeKit 3.7.3
- Babel source maps stopped working and enabling TLS could crash on Mojave
- Remember when I said the new Content-Security-Policy headers "just work"? Turns out I meant that in more of the AirDrop sense: "60% of the time, it works every GODDAMMIT THE DEVICE IS RIGHT HERE WHY CAN'T YOU SEE IT IF I HAVE TO TOGGLE WIFI ON AND OFF ONE MORE TIME I'M BUYING A DELL I SWEAR."
- Anyway, CSP now works correctly. I promise
- The rule editor in the Hooks area wouldn't save changes. That seemed inconvenient, so now it does
CodeKit 3.7.2
- Remember when I said the new Content-Security-Policy headers "just work"? Turns out I meant that in more of the AirDrop sense: "60% of the time, it works every GODDAMMIT THE DEVICE IS RIGHT HERE WHY CAN'T YOU SEE IT IF I HAVE TO TOGGLE WIFI ON AND OFF ONE MORE TIME I'M BUYING A DELL I SWEAR."
- Anyway, CSP now works correctly. I promise.
- The rule editor in the Hooks area wouldn't save changes. That seemed inconvenient, so now it does
CodeKit 3.7.1
- Change log not available for this version
CodeKit 3.7
New: Dark Mode + Mojave Support:
- Dark mode is available on every version of macOS, not just Mojave.
- On 10.14+, CodeKit will match the system accent color by default, but you can set a different one if you prefer.
- Adopted Apple's new "runtime hardening" security. If the app is somehow ever compromised, this feature vastly limits what an attacker could access on your Mac.
New: Target Browsers:
- A new category in Project Settings: Target Browsers
- Shows all the desktop and mobile browsers in which your project will work.
- Shows coverage percentages for the world and your local region.
- Babel, Autoprefixer, and other tools will now automatically configure themselves based on what browsers you enter here.
New: Babel 7:
- No more configuring. Babel will automatically choose the right plugins based on the browsers you support.
- Much faster transpiling.
- If you previously customized Babel settings, double-check them after updating.
- New: Base64 Imports in Kit Files:
- In Kit files, you can now write @import-base64 'someFile.png' to automatically base64-encode the target and include it in the base file.
- See the Kit documentation for examples.
New: Less 3.0:
- Less has been updated to 3.8.1 and some options have changed (mostly about when math operations get performed). If you use Less, double-check the options on your files after updating.
More:
- The list of options for Syntax Checkers and UglifyJS is now searchable.
- When ESLint shows an issue in the Log, you can now click the rule name to instantly adjust that rule in Project Settings.
- New AppleScript command to process a single file at a time. See the docs.
- The Preview Server now supports Content Security Policy (CSP) headers. If your site uses them, they just work; there's nothing to configure.
- CodeKit now [email protected] directives in Less files and recompiles when they change.
- The PNG image optimizer is about 10% faster.
Fixed:
- If you add custom languages to the app, then swap extensions, settings don't get confused any more.
- An edge-case where the preview server could crash.
- A possible race-condition in browser syncing.
- Triple-slash directives in TypeScript files weren't handled correctly.
- CodeKit won't try to set up the refresh server on ancient browsers that can't handle it, which will make one guy stop emailing me.
Component Updates:
- Libsass 3.5.4
- Babel 7.1.0
- Less 3.8.1
- UglifyJS 3.4.9
- CoffeeScript 2.3.1
- Susy 3.0.5
- MultiMarkdown 6.4.0
- Autoprefixer 9.1.5
- Haml 5.0.4
- Bourbon 5.1.0
- Bitters 1.8.0
- Neat 3.0.0
- ESLint 5.6.0
- PNGQuant 2.12.0
- Node 8.11.4
CleanMyMacCleanMyMac X 4.7.3
MalwarebytesMalwarebytes 4.7.9
BraveBrave Browser 1.19.86
PhotoshopAdobe Photoshop CC 2020 22.1.1
LuminarLuminar Photo Editor 4.4.0
ProtonVPNProtonVPN 1.9.1
ParallelsParallels Desktop 16.0.1.48919
AppCleanerAppCleaner 3.5.1
SHAREitSHAREit 0.9.0
Total AVTotal AV 2020