CardKit 2
What’s next for the configurable image editor for browsers?
In 2015 we launched CardKit, a rich image editor that runs inside your browser. Since then it has gained over 200 ⭐️s on GitHub, and is used in newsrooms around the world. At The Times our journalists and editors are using it every day to create rich, engaging images to be used on our social media channels. We’ve done experiments with live sports data, and used it to cover the US election primaries.
It was nominated and commended at the Online Media Awards 2016 in the Most Effective Media Tool category, and it’s even being used to train journalism students.
Recently we started thinking about what was next for CardKit. Based on our own experiences, and feedback from the open source community, we’ll soon be releasing CardKit 2, a ground-up rewrite that will bring a range of new features. The following are just a preview of what’s in-store when we publish CardKit 2 later this month.
1. Simpler installation
With CardKit 1, getting started wasn’t as simple as it should have been, and required some intricate knowledge of AngularJS. This was fine for developers, but we quickly started getting requests from journalists and business owners who wanted to use CardKit too.
CardKit 2 will be installable via npm, and can also be included in any HTML page via a regular script tag. This also means it’s much easier to update CardKit as we release new features, or fix bugs.
$ npm install cardkit --save// OR<script type="text/javascript" src="./path/to/cardkit.js"></script>
2. Simpler initialisation
In support of our simpler installation, it’ll be much easier to initialise CardKit 2, meaning getting started should be a breeze. If you install via npm, you can `require()` it into any JavaScript file, and if you import it using a script tag, it’ll be available as a global class. CardKit 2 will be a library that can be used anywhere in your code, in an existing project, or as the basis of a new project.
/** npm + require() */
const CardKit = require('cardkit');
const cardkit = new CardKit({}); // Pass your configuration in here// OR/** Imported <script> tag */
<script type="text/javascript">
var cardkit = new CardKit({});
</script>
3. BYOUI (Bring-your-own-UI)
CardKit 2 will come bundled with a brand-new UI, that gives more focus and prominence to the image you’re creating. However, the built-in UI often doesn’t suit your needs, and with CardKit’s new library structure, it’s now simple to design and build your own UI. At The Times, we’ve started work on our own bespoke UI, which introduces a few additional features for our own needs that wouldn’t make sense for the wider open-source community.
With CardKit 1, the card rendering logic was closely tied to the built-in AngularJS UI code. This made extending it and adding custom functionality cumbersome and difficult. Developers had to have some knowledge of AngularJS, limiting their ability to use the tool without having to learn something new. As CardKit 2 is a JavaScript library, it allows you to introduce your own UI. While CardKit 2 relies on React under the hood, developers can choose their own framework to use to interface with it.
4. Server-side rendering
With CardKit 2, we’ve introduced the ability to render images on a server, as well as in your browser. One of the most powerful features of CardKit is its simple configuration object. Define the base card sizing, the elements and styles to render, and an image and editing interface is automatically generated for you. This is great for times when we have editorial staff on hand to create bespoke cards for specific stories or events, however at The Times, we wanted to be able to use this same templated configuration object to automatically create images for our articles. We have a selection of templates for quotes, images and promotional cards, all of which we can automatically generate using CardKit 2’s server-side rendering.
// Import CardKit's server library
const CardKit = require('cardkit/server');// Initialise CardKit and pass in your configuration object
const cardkit = new CardKit({
card: {
fill: '#FFFFFF',
height: 400,
width: 600
},
layers: {}
});// Call renderToImage(scale = 2) to trigger an image render
cardKit.renderToImage(2)
.then((image) => {
console.log(image); // This will be a base64 encoded representation of the image
})
.catch((e) => {
console.log('[ERROR]', e);
});
This could be integrated with a Node.js web framework such as Express, to return an image as a response to a HTTP request. It could also be built into an Amazon AWS Lambda function, to run on a schedule or in response to an event, storing the generated image in storage such as Amazon S3.
CardKit 2 will be open-sourced on GitHub later this month, so keep an eye on the repository for more details. We also plan to launch a Yeoman generator alongside CardKit 2 to make it even easier to get started.
We can’t wait to see what you come up with.
CardKit is built by The Times Digital Development Team, who can be followed on Twitter @TimesDevelops. CardKit is also on Twitter @CardKit. You can find CardKit’s source code on GitHub at github.com/times/cardkit.
