HAML HTML JADE SASS MARKDOWN KIT COFFEE TYPESCRIPT SLIM SVG JS ES6
  • Features
  • Videos
  • Help
  • About
  • Updates
Buy Now

Build websites
faster and better

Buy Now $34
Download

What's new in CodeKit 3.0
The trial includes all features and unlocks in place

Version 3.1 (25813), macOS 10.11+

Compile Every Language

CodeKit automatically compiles all those awesome languages you read about in tutorials.

All The Cool Kids

Compile Sass, Less, Stylus, CSS, CoffeeScript, Pug, Slim, Haml, TypeScript, JavaScript, ES6, Markdown, JSON, SVG, PNG, GIF and JPEG right out of the box.

Dead-Simple Configuration

Want compressed CSS? Just check a box. Need to transpile JavaScript? Check a box. Every tool's options are available in a beautiful, clean UI. No more hacking build scripts.

Bleeding-Edge Tools

Autoprefixer for vendor prefixes. Babel.js for next-generation JavaScript. Libsass for faster Sass compiling. The best workflows are built right in.

Add Any Language

Use something that's not built-in? Easily tell CodeKit how to process files of any type, right in the UI. No stupid config files or plugins required.

Learn more

Refresh Browsers

CodeKit automatically refreshes browsers as you work. Like magic.

Any Device

Mac, iOS, Android, Windows, Tesla, kitchen fridge... if it's got a modern browser, it refreshes. All major browser vendors are supported, even over SSL.

Zero Setup

No plugins, no script tags, no work. Just click the Preview button in CodeKit and you're done. You don't even need certificates for SSL. Really.

Browser Sync

Type some text in a form and it magically appears on all your other devices, too. Click a link, it's clicked on every device. Fast cross-device testing.

Learn more
Injection Reloads

CSS changes are injected without reloading the entire page, so you can easily style dialogs and modal content, or just A/B test designs.

Optimize

Ain't nobody got time for slow, bloated websites. CodeKit makes them faster.

Optimize Images

Get 70% smaller PNG and JPEG files in one click. SVGs and GIFs, too. Smaller images mean faster websites.

Learn more
Minify Scripts & CSS

Combine scripts to reduce HTTP requests. Minify your code to reduce file sizes. All the best practices with full control over the details.

Learn more
Source Maps

Minify your code, but see the original version in the browser's inspector. Works automatically with most languages and without headaches.

Build

Build your entire project with one click. Fine-tune the process in an intuitive, beautiful UI.

Easy Migration

Check one box and existing projects just work. No updating hundreds of output paths, no changing URLs on pages. It's magic.

Simple Configuration

Easily customize your build process. Add steps with one click. Drag them to reorder. Setting this stuff up shouldn't require trips to Stack Overflow.

Blazing Speed

Your Mac's processor has lots of cores. CodeKit uses all of them to process files in parallel so that builds finish fast.

Completely Extendable

Do literally anything. Run a custom shell script and see its output in the UI. Or use AppleScript to tell Transmit to upload your site when the build is done.

Get Started Fast

You know how frameworks have those complex "getting started" steps? How about we just do a single click instead?

Bower Power

Bower is built into CodeKit so you can install and update 56,000+ components with ease. jQuery to WordPress and everything in between.

Learn more
Zurb Foundation

Spin up a Foundation or a Google Web Starter Kit project in seconds. CodeKit downloads the latest version and sets it up for you, automatically.

Learn more
CSS Frameworks Galore

All the best CSS frameworks are built-in: Bourbon, Neat, Bitters, Susy, Nib, Jeet, and Compass. Just add an @import statement to your stylesheet and CodeKit makes it work.

CodeKit Frameworks

Reuse code in multiple projects but keep a single copy of it on your disk. When you update it, everything recompiles to capture the changes.

Debug

Missing that one freaking comma somewhere? Find the problem fast with built-in debugging tools.

ESLint

Scan JavaScript with the mother of all syntax-checkers. Easily customize hundreds of rules with examples and explanations right in the UI.

Learn More
JSHint & JSLint

Not ready to move to ESLint? No problem. JSHint and JSLint are built-in, too. See the exact line and column number of every issue.

CoffeeLint

Scan CoffeeScript files for issues, too! Configure options in a slick UI and enforce best practices, just like you do for JavaScript.

Enforce Coding Styles

Got that one guy who uses tabs instead of spaces? Make him fall in line and easily set up rules to keep the whole team writing clean, readable code.

Our Mac updates are now scheduled around major CodeKit releases. This app is that good.

Phil Schiller Senior Vice President, Apple

content-type: application/json {'message' : 'Who wants...

Grunt JavaScript Task Runner

CodeKit 3 is the most deliberate evolution of our founding design. Each button's 9-step anodization process brings absolute unity and efficiency to a singular vision. This is truly a product that only Apple could create.

Jony Ive Chief Design Officer, Apple

Is he...high?

Craig Federighi Senior Vice President, Apple

Please stop quoting my employees.

Tim Cook CEO, Apple

(45 seconds later) ...a stupid GUI, anyway?'}

Grunt JavaScript Frustration Producer

I'm still ignoring you on Twitter.

John Gruber Author, Daring Fireball

Do you have any idea how many lawyers $134 billion hires? All of them. All of the lawyers.

Apple Legal Unhappy Since 2009

When our engineers switched to CodeKit, our phones just started blowing up...with compliments.

Samsung Electronics Mobile Campfire Manufacturer

I found six cold kids nearby. Tap the one you want.

Siri Ostensibly Intelligent Assistant

Your app is lame, your face is lame, your friends are lame, and your continued existence deeply offends us.

Hacker News Where Self-Esteem Goes To Die

Your trademark for "CodeKit" has been rejected because it is too broad. Every app is a kit of code.

U.S. Patent & Trademark Office Not Kidding; This Really Happened

Come on, baby. I've changed! I'd never hurt you, I swear! Just give me a chance. And 30%.

The Mac App Store Purveyor of Pain and Sorrow

Seriously, which one of these do you want? They're getting away.

Siri Hal's Inbred Cousin

Build websites
faster and better

Buy Now $34
Download

What's new in CodeKit 3.0
The trial includes all features and unlocks in place

Version 3.1 (25813), macOS 10.11+

Made in San Diego, CA
Follow the Developer on Twitter

  • Email support
  • Found a bug?
Created with Sketch. Bob Loblaw Law Bob Loblaw Law All Files OPTIONS LINKED FILES Sass Output style: Compact Debug info: None Other options: Create a source map Use the libsass compiler After compiling: Run Bless on the CSS file Run Autoprefixer on the CSS file Output When this file changes: Compile it OPTIONS LINKED FILES Prepend to this file: vars.js tony_wonder.js Append to this file: Drag a file here ES6 Imports: Drag a file here Imported by: Drag a file here Javascript Check syntax with: ESLint Transpile with: Nothing Processing options: Minify the output Generate a source map Output When this file changes: Compile it Scalable Vector Graphic Initial size: 23kb Current size: N/A 18kb Savings: N/A 12% Processing options: Pretty-print optimized SVG Use multipass Optimize by cleaning up: Attributes with new lines and spaces Unused IDs Enable-background when possible Optimize build source about bower_components images seaward.svg index.html kit _header.kit _footer.kit scripts all.js vars.js stylesheets style.scss vars.scss Basic Install Options Install dependencies Add bower.json to dependencies Add bower.json to devdependencies Use exact version Advanced Install Options Custom version: Custom local name: Install The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device. foundation-sites Name Owner Stars include-media eduardoboucas 634 jquery jquery 34,245 modular-scale modularscale 1,336 scrollmagic janpaepke 6,792 foundation-sites zurb 23,143 gsap greensock 4,467 reveal.js hakimel 27,565 Build Project Process All Remaining Files and Folders Process These Files source/partials/static/header.kit source/javascripts/imports/all.js 1 2 cd ~/GitHub/bobloblawlaw git commit -m “It’s vodka, it goes bad once it’s opened” Run script: 185 scripts/javascript.js 185 scripts/javascript.js 185 scripts/javascript.js 185 scripts/javascript.js 185 scripts/javascript.js 185 scripts/javascript.js 185 scripts/javascript.js 185 scripts/javascript.js 185 scripts/javascript.js 185 scripts/javascript.js 185 scripts/javascript.js Bob Loblaw Law Preview Server Addresses Server Options Use TLS (SSL) for all connections Bonjour: For MacOS and iOS http://blueman.local:5757 Non-Bonjour: For non-Apple devices http://173.41.382:5757 This Mac Only: For non-Apple devices http://localhost:5757 Optimizing seaward.svg build css images bower_components about index.html svg javascript bower_components include_media jquery modular_scale scrollmagic gsap revealjs fitvidjs foundation-sites index.html $( document ). ready ( function () { // init var m = moment (); var minutes = ( m . hour () * 60 ) + m . minute (); var progresshour = 0 ; var clockHeight = $(' #clock '). height (); var viewportHeight = window . innerHeigh t; var scrollbarHeight = viewportHeight / $( document ). height () * viewp console . log ( clockHeight ); function posLayout ( scrollbarHeight ) { $(' .schedule '). css (' margin-top ', scrollbarHeight / 2 ); $(' .schedule '). css (' margin-bottom ', scrollbarHeight / 2 ); } function progressToText ( progress , ratio , modulo , addZero ) { const val = modulo ? Math . floor ( progress * ratio ) % modulo : M return ( val > 9 && addZero ) ? val . toString ( ) : " 0 " + val. toSt } function rotateElement ( id , val ) { $( id ). css ( transform : ' rotate( ' + val + ' deg )', ' -webkit-transform ': ' rotate( ' + val + ' deg) ', ' -ms-transform ': ' rotate( ' + val + ' deg) ' }); } function translateElement ( id , val ) { $( id ). css ({ transform: 'translateY( ' + val + ' px)' , '-webkit-transform' : 'translateY( ' + val + ' px)' , '-ms-transform' : 'translateY( ' + val + ' px)' }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 style.scss $columns : 2 ; .header { height : 20% ; display : flex ; } .main { flex : 1 ; } .footer { flex : 2 ; } .thumbnail { width : 100px ; height : 100px ; } article. featured { background: red ; } article. popular { background : green ; } article. new { background : blue ; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 http://blueman.local:5757 http://blueman.local:5757 Success The file compiled successfully