CardKit 2 Demo / Tester

In this example below you will see how to do a CardKit 2 Demo / Tester with some HTML / CSS and Javascript

A quick test environment for CardKit 2 configurations

This awesome code was written by chrishutchinson, you can see more from this user in the personal repository.
You can find the original code on
Copyright chrishutchinson ©


  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>CardKit 2 Demo / Tester</title>


  <!-- Element to render the UI into -->
<div id="ui"></div>
  <script src=''></script>
<script src=''></script>
<script src=''></script>
<script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
// Initialise CardKit and pass in the config object
var cardkit = new CardKit({
  card: {
    height: 320,
    width: 600,
    fill: '#333333'
  layers: {
    headline: {
      name: 'Headline',
      type: 'text',
      text: 'This is some sample text',
      x: 20,
      y: 20,
      fill: '#FFFFFF',
      fontFamily: 'Helvetica',
      fontSize: 30,
      get lineHeight() {
        return this.fontSize * 1.2;
      draggable: true,
      editable: {
        text: true,
        fill: 'picker'

// Initialise the renderer passing in the CardKit object
var renderer = new CardKitDOM(cardkit);

// Render the UI
//renderer.renderCard('ui'); // Uncomment this line to render just the card, with no editing UI