Console messages for cool kids
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

I am also working on a Markdown Editor. I will appreciate it if you check it out and tell me what you think.


Console messages for cool kids


Cool kids

console.message().text('Cool kids', {
	fontSize: 200,
	color: 'hsl(330, 100%, 50%)',
	textShadow: '0 2px 0 hsl(330, 100%, 25%), 0 3px 2px hsla(330, 100%, 15%, 0.5), /* next */ 0 3px 0 hsl(350, 100%, 50%), 0 5px 0 hsl(350, 100%, 25%), 0 6px 2px hsla(350, 100%, 15%, 0.5), /* next */ 0 6px 0 hsl(20, 100%, 50%), 0 8px 0 hsl(20, 100%, 25%), 0 9px 2px hsla(20, 100%, 15%, 0.5), /* next */ 0 9px 0 hsl(50, 100%, 50%), 0 11px 0 hsl(50, 100%, 25%), 0 12px 2px hsla(50, 100%, 15%, 0.5), /* next */ 0 12px 0 hsl(70, 100%, 50%), 0 14px 0 hsl(70, 100%, 25%), 0 15px 2px hsla(70, 100%, 15%, 0.5), /* next */ 0 15px 0 hsl(90, 100%, 50%), 0 17px 0 hsl(90, 100%, 25%), 0 17px 2px hsla(90, 100%, 15%, 0.5)',
	fontFamily: '\'Permanent Marker\', cursive'

cool kids example

Used in jsblocks

    .span({ fontWeight: 'bold'})
    .text('Arguments mismatch:', { background: 'yellow' })
    .text(' ')
    .span({ background: '#eee' })
    .text(' ? ', { background: 'red', color: 'white' })
    .text(' - ')
    .text('less arguments than the required specified', { color: 'red' })

console.message example

Grouping awesomeness

	.text('Error occurred while executing code', { color: 'red', fontSize: 24 })
		.text('For more information expand the group', { color: 'green' })
		.text('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.')

grouping awesomeness example

Browser support

The project supports Chrome, Firefox, Safari, Opera, IE7+. It fallbacks to messages without styles when they are not supported.



Appends a text to the current message. All styles in the current span are applied.

console.message().text('this is equal to just calling console.log()').print();

	.text('Error: ', { color: 'red' })
	.text('this is more useful scenario')

text() example


Adds an interactive DOM element to the output.

	.text('Hey take a look at the page body')

element() example


Adds an interactive object tree to the output.

	.text('Hey take a look at the this object ')
	.object({ firstName: 'John', lastName: 'Doe' })

object() example


Starts a span with particular style and all appended text after it will use the style.

	.span({ color: 'red' })
	.text('this is red! ')
		.span({ color: 'green' })
		.text('this is green! ')
	.text('this is again red!')

span() example


Ends the current span styles and backs to the previous styles or the root if there are no other parents. Take a look at the example above.

group(expanded:boolean = true)

Begins a group. By default the group is expanded. Provide false if you want the group to be collapsed.

	// pass false if you want to create a collapsed group
	.text('The group header text')
	.text('The group content')

group() example


Ends the group and returns to writing to the parent message.

	.text('Outside of group')

groupEnd() example


Adds a new line to the output.

	.text('first line')
	.text('second line')

line() example


Prints the message to the console. Every message chaining should end with print. No print() call no message.

console.message().text('just text').print();