-
Notifications
You must be signed in to change notification settings - Fork 138
What is CardKit?
CardKit is a simple, powerful and fully configurable image editor for web browsers and servers. Optional UI included.
CardKit makes it simple to create visually stunning images for use on social media, with minimal effort, and without the need for complex or expensive image editing software. CardKit gives you the controls you need and hides the rest.
CardKit 2 is a huge step forwards, and provides a variety of new tools and technologies to help make creating engaging images even easier.
Initially CardKit was a fork of Vox Media's Meme library, a canvas based image editor. Whilst it was good and offered us a great starting point, we quickly came up against a number of issues with Meme, particularly around theming and quickly adding multiple elements.
We had a number of different themes to apply to our 'cards', and wanted an easy way to add or remove elements, and tweak the amount of control on a per-element-basis. We based CardKit v1 on Snap.svg, an open source SVG manipulation library. This gave us more control over every element, and integrating it with AngularJS allowed us to quickly build an interface around our configuration file. CardKit v1 has seen adoption in newsrooms around the world, and we continue to be amazed at how people are using it, and the innovative solutions people have created to some of the most difficult challenges of creating images on the web.
CardKit 2 is a natural evolution of v1, making much of what v1 offered simpler and easier, while bringing a powerful set of renderers along with it. CardKit 2 consists of three main libraries. CardKit - the core library for managing your configuration. CardKitDOM - one of our two bundled renderers, that allows you to render a CardKit image into your web browser, with an optional React-based UI for editing. And CardKitServer - our second bundled renderer, that allows CardKit images to be generated on the server via Node.js. Unlike CardKit v1, which required developers to fork our times/cardkit repo and make their own changes (meaning they weren't easily able to update their CardKit version if we released new features), CardKit 2 is a library that can be installed via npm install cardkit --save or included as a <script> tag. This means developers are free to configure CardKit how they like, but still take advantage of new versions as we release them.
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>Donald Trump takes South Carolina https://t.co/Dinai8V7Nj #Election2016 pic.twitter.com/bgkNqmERF1
— The Times of London (@thetimes) November 9, 2016