Konsul is an abstraction of the browser's console that comes with a React renderer. It offers text styling, images, style inheritance, buttons with click interaction, etc. inside the browsers dev console.

See the live demo here

Usage

With react

Install konsul and react-konsul using npm:

npm install konsul react-konsul react

The following code demonstrates how you can use konsul with react.

import createKonsul from 'konsul';
import renderToKonsul from 'react-konsul';

// Create an instance of konsul
const konsul = createKonsul();

// Render react elements to the browser console!
renderToKonsul(<text style={{ color: 'red', fontWeight: 'bold' }}>Hello world!</text>, konsul);

This is what the result will look like:

See more examples here with the live demo.

React element types

text

This node is the only node type that accepts strings and numbers as children.

image

A Konsul node for displaying images from a url.

button

An interactive node that responds to clicks. Note that it only works on chrome for now.

group

All the children of a Group element will be wrapped inside console.group.

container

This node has no specific behaviour. It works as a container and renders all its children.

Without react

Install konsul via npm:

npm install konsul

The following code is the previous example but without react:

import createKonsul from 'konsul';

// Create an instance of konsul
const konsul = createKonsul();

// Create a text
const text = konsul.text({
  style: {
    color: 'red',
    fontWeight: 'bold'
  }
});

// Append a text to the text element
text.append('Hello world!');

// Append the text element to konsul
konsul.append(text);

// Render to console. The subsequent renders will occur automatically for example by updating the style or children.
konsul.render();

License

Released under the MIT License