CardKit 2 Demo / Tester

A quick test environment for CardKit 2 configurations

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
<script src="https://cdn.rawgit.com/times/cardkit/v2.0.6/dist/cardkit.js"></script>
<script src="https://cdn.rawgit.com/times/cardkit/v2.0.6/dist/dom.js"></script>
<!-- Element to render the UI into -->
<div id="ui"></div>

CSS

///////////////////////////////
// CardKit + JSFiddle advice //
// To get the best CardKit experience in JSFiddle's UI, make the HTML and Babel editors as narrow as possible, and the CSS editor as short as possible. This will leave you with the biggest possible UI space for the editor in the bottom right.
// If you only want to render the card (no UI), then comment out line 34 in the JavaScript, and uncomment line 35
///////////////////////////////

Babel + JSX

// Initialise CardKit and pass in the config object
const 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
const renderer = new CardKitDOM(cardkit);

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