Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including atlastk with all npm packages installed. Try it out:

/* Copyright (C) 2018 Claude SIMON (http://q37.info/contact/). This file is part of XDHq. XDHq is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. XDHq is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with XDHq If not, see <http://www.gnu.org/licenses/>. */ const atlas = require('atlastk'); const head = ` <title>"Hello, World !" example</title> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUEAvyEhsxERuS8urQsKuycnsRkYtzc2qwUFvRUVtysrrx0ctTs6qTMyrSUksQ0NuyciPBdAAABHklEQVR42mNgwAa8zlxjDd2A4POfOXPmzZkFCAH2M8fNzyALzDlzg2ENssCbMwkMOsgCa858YOjBKxBzRoHhD7LAHiBH5swCT9HQ6A9ggZ4zp7YCrV0DdM6pBpAAG5Blc2aBDZA68wCsZPuZU0BDH07xvHOmAGKKvgMP2NA/Zw7ADIYJXGDgLQeBBSCBFu0aoAPYQUadMQAJAE29zwAVWMCWpgB08ZnDQGsbGhpsgCqBQHNfzRkDEIPlzFmo0T5nzoMovjPHoAK8Zw5BnA5yDosDSAVYQOYMKIDZzkoDzagAsjhqzjRAfXTmzAQgi/vMQZA6pjtAvhEk0E+ATWRRm6YBZuScCUCNN5szH1D4TGdOoSrggtiNAH3vBBjwAQCglIrSZkf1MQAAAABJRU5ErkJggg==" /> <style type="text/css"> html, body {height: 100%; padding: 0; margin: 0;} .vcenter-out, .hcenter { display: table; height: 100%; margin: auto; } .vcenter-in { display: table-cell; vertical-align: middle; } </style> `; const body = ` <div class ="vcenter-out"> <div class ="vcenter-in"> <fieldset> <label>Name: </label> <input id="input" maxlength="20" placeholder="Enter a name here" type="text" data-xdh-onevent="input|Typing" /> <button data-xdh-onevent="Clear">Clear</button> <hr /> <h1> <span>Hello </span> <span style="font-style: italic;" id="name"></span> <span>!</span> </h1> </fieldset> </div> </div> `; const callbacks = { "": (dom, id) => dom.setLayout("", body, () => dom.focus("input")), "Typing": (dom, id) => dom.getContent(id, (name) => dom.setContent("name", name)), "Clear": (dom, id) => dom.confirm("Are you sure ?", (answer) => { if (answer) dom.setContents({ "input": "", "name": "" }) }), }; atlas.launch(() => new atlas.DOM(), callbacks, head); "The program will be stopped after a while due to a RunKit timeout."

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

atlastk v0.6.0

Toolkit for handling web interfaces

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free