Artboard_00-FinalFinal-v2 ? VisBug Open Source

Browser Design Tools

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.

📱 Mobile Users! VisBug is very much a desktop centric tool. BUT! If you're in a browser with a nice HTML color input, then you can have some fun too. Here's how: Tap stuff, look for the text and fill icons under the toolbar, tap one, and use your operating systems HTML5 color input to change colors of elements, even SVG! 💀🤘

Select ? Click Me 😏

Keyboard Nav ? Tab & Shift + Tab traverse laterally Enter & Shift + Enter traverse lineage

Select Multiple ? 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 👉

Change Colors ? 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

Margin Tool ? Hotkey m Home About Docs Code Contact

Delete ? Delete this 😤 thing! 👇 Ad

Guides ? Redlines & distance coming soon! Am I in the center?

#1 rule Have some fun!

Inspect Tool ? inbox Inbox

Inbox star Star

Star send Send

Send drafts Drafts

Accessibility Tool ? Good contrast Bad contrast Radio 1 Radio 2 Radio 3 Reset Submit

Duplicate ? Press cmd+d Dupe Me

Copy/Cut & Paste Elements ? 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/Paste Styles ? 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 Copy my darkness Join the darkside

Image Swap ? Select all 4 images and drag in some new ones OR just drag a new image onto any one of these

Text Styles ? 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

Move Tool ? Fix the order of the circles below Tip: left and right are safe, up and down are difficult 3 5 4 1 2

Move Tool ? Flow direction can make left/right be up/down 🤔 Fix the order of the stop light below

Edit Text Tool ? I'm worth $100 /hr How much are you worth? Edit the text to specify your rate.

Break This Site

#tangiblelearning

Inline SVG ? Delete, copy, paste, & duplicate svg! Change color, move x/y, & inspect svg!

Padding Tool ? Hotkey p Home About Docs Code Contact

Drop Shadow Tool ? Hotkey d

press ? for help

Position Tool ? Hotkey l Click to select, then click hold and drag anything around Move this artboard to somewhere wierd!

Align Tool ? Hotkey a Left Right Up Down Shift+Left

No undo.. yet! BUT

You can unstyle

Search Tool ? Hotkey s Select me by searching ".search-title" Search ".search-link" To Select Us

Delete styles ? Press opt+del to remove inline styles Ew, get rid of these terrible edits someone (me) did! 👇 Fix Me!