I came across Airtable at a recent hackathon-esque event, when a fellow developer suggested we use it as a way to store and use our data. I was super into it. For the first time, I felt like: “This is a database for me. This is what I want out of a data storage system.”

In a nutshell…
Airtable lets you build spreadsheets. Each spreadsheet is a database.
Imagine building “Project Progress Tracker”. You’d want to store things like the name of the project, whether it’s complete or not, the category of project, and some photos.
Those would be four columns in the spreadsheet: name (string), complete (checkbox/boolean), category (multi-select), photos (files).
Then each row in the spreadsheet is an entry in the database.

You can now not only view this data in Airtable’s nice UI, but programmatically access it. You get great JSON API’s for all the CRUD actions: Create, Read, Update, Delete.
Let’s Build Something: A Poll!
We’re front end developers, so let’s build something functional. A poll is a basic example of something we can design and build, and needs a database to be useful. Airtable can help!
How about a form where you vote for a favorite emoji:
<form action="#0" id="voting-form" class="voting-form">
<h1>Which of these emojis is your favorite?</h1>
<div>
<select name="emoji_choice" id="emoji_choice">
<option value="👯">👯</option>
<option value="🍑">🍑</option>
<option value="💥">💥</option>
<option value="🍕">🍕</option>
<option value="☠️">☠️</option>
</select>
</div>
<div>
<input type="submit" value="Vote">
</div>
</form>
Send the Votes to Airtable for Storage
When the user submits our form, let’s create a new entry in our database (Airtable spreadsheet). Let’s POST the data, directly through JavaScript, via Ajax. We’ll use Axios here, since it’s a nice dependancy-free Ajax library.
var form = document.querySelector("#voting-form");
var select = document.querySelector("#emoji_choice");
// When the form is submitted...
form.addEventListener("submit", function(event) {
event.preventDefault();
// POST the data
axios.post(airtable_write_endpoint, {
"fields": {
"Emoji Choice": select.options[select.selectedIndex].value
}
});
});
Get the Results from Airtable
Now we want to display the results of the poll as a chart. SVG is great for that. Let’s use the D3.js library to help us programatically create the chart. We could even just have it build some <div>
s for this, since the chart is some straightforward rectangles, but using D3 opens up the door for future fanciness.
Let’s create a function we can call to get the data and build the chart:
function getData() {
// zero out data
pollData = {
"👯": 0,
"🍑": 0,
"💥": 0,
"🍕": 0,
"☠️": 0
};
// GET the data
axios
.get(airtable_read_endpoint)
.then(function(result) {
result.data.records.forEach(function(element, index) {
pollData[element.fields["Emoji Choice"]]++;
});
}
Build the Chart with the Data
We can pass D3.js an array of data and it can build out a chart:
function buildChart(data) {
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 400]);
d3
.select(".chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", function(d) {
return x(d) + "px";
})
.text(function(d, i) {
return emojis[i] + " " + d;
});
}
With a little CSS colorization:
.chart {
padding: 20px;
}
.chart div {
font-size: 20px;
text-align: right;
padding: 5px;
margin: 0 0 3px 0;
color: white;
}
.chart div:nth-of-type(1) {
background-color: #FDBE1A;
}
.chart div:nth-of-type(2) {
background-color: #F2B6A0;
}
.chart div:nth-of-type(3) {
background-color: #FFD85A;
}
.chart div:nth-of-type(4) {
background-color: #830C07;
}
.chart div:nth-of-type(5) {
background-color: #999999;
}
We get results!

Live Demo
In this live demo, we string the functions we wrote above together into working together:
See the Pen Airtable Emoji Poll by Chris Coyier (@chriscoyier) on CodePen.
Things To Know About the API
Key Secrecy
The demo above is entirely front end! I love that, but you should know, that exposes the API key for this database. You wouldn’t want that for anything public of consequence, but for an internal thing it might be fine.
To keep your key secret, you’d make the API calls from the backend. This kind of thing is usually referred to as an “API proxy” or “API wrapper”. You’d write some simple code where you Ajax to that and it makes the requests to the API.
As luck would have it, Airtable has an example API proxy (in Ruby) available for you to check out. Here’s another example in PHP you could look at.
The Docs are Awesome
They show the API docs as they relate to your databases! So the example URL’s and parameters are the real ones that you use.

We maybe could have made the demo more efficient by trying out the filterByFormula
API parameter and telling it to return us all records that match a certain emoji and checking the count, rather than counting ourselves.
5 Requests per Second
Airtable isn’t really for mega production high power data storage. I’m sure that’s no surprise. Airtable is for you and your team moreso than a data store for your startup.
Airtable Also Gives You Forms
In our demo we created our own form. That’s useful when you need to do totally custom things, but we didn’t have to. Airtable allows you to create different “views” of your data spreadsheets, including a “form” view.

You can customize the form to your liking and send people links to it, or, embed the form right on your own site. Yeah! A form builder ideal for collecting structured data!
If what you’re building is fairly date-specific, you can also build calendar views to view and interact with data that way.

Build Away
What comes to mind for you when you think about the potential of easy and friendly data storage and a tool like Airtable?
If you like the idea of only having to deal with the front end (web or a mobile client) and let someone else manage the whole back end stack you should check out Firebase.
Firebase runs on top of Google Cloud Platform which means it scales insanely well, and they just launched a bunch of new features, so now days they’re well beyond just being a “database”.
Check out the Firebase videos from Google I/O 2016 where they announce all the new stuff. All the videos are available in this I/O 2016 YouTube playlist.
I’ve only used Firebase a bit myself before they joined Google but I was very impressed by the simplicity of it, and I’m a user of Google Cloud Platform, which is very easy to use (even with Node.js) so the idea of Firebase making all of that pretty much plug-and-play is very exciting.
+1 for Firebase, it’s also real-time, entirely front-end and secure if you configure it through their settings.
I will definitely take a look at Airtable to though
The Live Demo is broken for me. I’m using Chrome, up to date, no plugins, Ubuntu 14.04.
https://css-tricks.com/use-airtable-front-end-developer/#article-header-id-5
I’m on Chrome also, running Mint 17.2; the codepen works for me but the only emoji that shows up is the skull and crossbones. The others just show up as a blank box.
Same here = broken as well. Linux Mint 17.3 XFCEish (aka Ubuntu 14.04 with LTS Enablement Stack). Changing encoding or the font didnt help.
Also some script code seems to run amok = spouting out hundreds of errors in the console (Firefox).
cu, w0lf.
Great article, Chris. I’m a big AirTable fan too.
If you’re working with a static site (e.g. github pages or surge.sh) and don’t have the ability to make an API proxy, you can add a read-only user to your table and use their token.
This comment was a total lifesaver – thanks for posting it.
Very cool article Chris. Thanks a lot for write up!
Hi, great article and good to find out about new applications. I got stuck at the start line though, as I was only able to find documentation relating to either node or curl environments, whilst your example is JavaScript.? Probably me being a little dhur but not sure how curl or node relate, or compare to JavaScript? Thanks
curl in this context just means some URL you can hit that will spit out the data. That’s exactly what you need in (client side) JavaScript to use Ajax to get the data.
So you’ll see this in the API docs for curl:
in (client side) JavaScript, with an Ajax lib like axios, you’d do something like this: