New Tab
Components
https://browser-core.dev/workspace
v2.0 RELEASED BUILD 2024.12.04

Browser
Core
Workspace

High-density developer tools interface. Inspect, modify, and deploy with precision-engineered components.

LICENSE: MIT STARS: 12.4K FORKS: 892
ELEMENT
display: flex
padding: 16px
border: 1px solid #e5e7eb
shadow: 0 1px 3px rgba(0,0,0,0.1)

Changelog

v2.0.0 • 2024-12-04

  • + Added multi-select property inspector with batch editing capabilities
  • + Implemented CSS Grid overlay visualization with snap guides
  • + New shortcut system supporting custom keybindings configuration
  • + Performance improvements: 40% faster DOM tree traversal
  • + Dark mode compatibility for all inspector panels
Explorer
workspace
index.html
styles.css
script.js
Shortcuts
⌘P Palette
⌘B Sidebar
⌘D Duplicate
⌘/ Comment
div.card 400×300
400px
300px
Properties
Typography
Colors
#111827
#06B6D4
#E5E7EB
Layout
README.md

Browser Core Workspace

A high-density technical interface for developers who need precision control over their browser environment.

# Features

  • › Simulated browser chrome with functional DevTools aesthetic
  • › Property inspector with real-time dimension visualization
  • › Pattern-grid background system for spatial awareness
  • › Monospace data labels and technical specifications

# Installation

bash
npm install @browser-core/workspace

Technical FAQ

Documentation & Troubleshooting

How does the property inspector grid work?
The grid uses a strict 4px/8px spacing system with grid-cols-[80px_1fr] layout. Labels use JetBrains Mono at 10px in uppercase. Values support drag-to-resize interactions for numeric inputs like font-size and spacing.
Can I customize the cyan accent color?
Yes. The primary accent variable is --color-primary: #06B6D4. Override in your CSS or use the property inspector panel to adjust the hex value in real-time. All interactive states derive from this base cyan value.
What browsers support the selection box visualization?
The 2px solid cyan border with 4px white offset uses standard CSS box-shadow and border properties. Supported in all modern browsers: Chrome 88+, Firefox 85+, Safari 14+, Edge 88+. Legacy support requires polyfills for CSS custom properties.
Is the pattern-grid background performance optimized?
Yes. The 20px linear-gradient grid uses CSS background-image with 30% opacity lines. This is GPU-accelerated and performs significantly better than SVG patterns or canvas-based alternatives at high viewport sizes.