VisBug logo

VisBug

Open Source
Browser Design Tools

curly bug arrows pointing to tool pallete

Welcome!

You've arrived at the "try before you buy" sandbox and playground.

Each artboard is tailor made to provoke your design brain and teach you a feature.

Click Me 😏

Tab & Shift + Tab traverse laterally

Enter & Shift + Enter traverse lineage

Hold shift to manually multi-select

Click 1, then click a class in the label for that element: ".cmd-e" in this case!

Press cmd+e to expand your selection

Press cmd+shift+e to expand to all matches

try here 👉

Click one of these squares, then click a color icon under the toolbar to get a picker!

This
is
rad

Try the

Keyboard Trainers

Press ? with any tool

Hotkey m

Delete this 😤 thing! 👇

Ad

Redlines & distance coming soon!

Am I in the center?     

#1 rule

Have some fun!

Good contrast Bad contrast
Sweet VisBug logo

Press cmd+d

Copy the circle from the left box cmd+c

Paste it in the right box cmd+v

Did I mention it works across tabs!

Copy styles with cmd+opt+c

Paste copied styles with cmd+opt+v

For fun: copy the styles of a dark artboard and paste it over some light artboards

Select all 4 images and drag in some new ones

OR just drag a new image onto any one of these

Female toon walking Male toon walking Female toon walking Female upside down walking

Hotkey f

The font in this artboard is the system font. It has lots of weights and is very elegant at large or small sizes. Can you make it look better?

Multiselect these headings and edit the ramp with the font tool, what ramp styles do you like?

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

Fix the order of the circles below

Tip: left and right are safe, up and down are difficult

3
5
4
1
2

Flow direction can make left/right be up/down 🤔

Fix the order of the stop light below

I'm worth $100 /hr

How much are you worth? Edit the text to specify your rate.

Break

This

Site
#tangiblelearning

Delete, copy, paste, & duplicate svg!

Change color, move x/y, & inspect svg!

Hotkey p

Hotkey d

press
?

for help

Hotkey l

Click to select, then click hold and drag anything around

Move this artboard to somewhere wierd!

Hotkey a

No undo..

yet!

BUT
You can unstyle

Hotkey s

Select me by searching ".search-title"

Press opt+del to remove inline styles

Ew, get rid of these terrible edits someone (me) did! 👇

Fix Me!

Hotkey [ or ] to switch between foreground/background

Try multi-selecting all these circles and changing their hue contextually, it makes a pretty light show

1
2
3
4