Capture web components with AI

UI Inspector - Visual CSS Editor

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging. A Visual CSS Editor for the Browser Elevate your web development and design workflow with UI Inspector, a powerful Chrome extension that lets you inspect, edit, and style any web page visually and in real-time. Skip the hassle of diving into DevTools and make instant adjustments directly on the page. With UI Inspector, you can: - Inspect elements — activate the extension and click on any element to view its attributes. - Edit attributes — modify styles in the visual editor and see changes in real time. - Control typography — adjust font family, size, weight, line height, and letter spacing. - Configure layout and spacing — set margins, paddings, display properties, and alignment. - Enhance backgrounds and shadows — apply custom colors, gradients, background blurs, and shadow effects. - Customize borders — adjust border width, style, color, and radius. - Fine-tune appearance — control opacity, blend modes, and transforms like rotation. - View all changes — see a list of every element you've updated in one place. - Copy CSS — view and copy the compiled CSS of your changes instantly. Unlock UI Inspector PRO and: - Apply changes globally — use the sensitivity slider to automatically apply style changes to similar elements across the page. - Style presets — save any element as a reusable preset and apply it across any website with a single click. - Export as Tailwind, SCSS, or JSX — copy your changes in the code format your project needs. - Export screenshots — capture high-resolution PNG screenshots of individual styled elements. - Export to GitHub — generate a GitHub issue with your design changes compiled to CSS. Who Is UI Inspector For? Web Developers: - Accelerate front-end development: quickly identify and fix layout or styling issues by editing elements on the fly. - Simplify CSS debugging: bypass DevTools with an intuitive, visual editor. - Export production-ready code: copy changes as CSS, Tailwind, SCSS, or JSX directly into your codebase. Web Designers: - Real-time design validation: adjust and perfect designs in the browser to ensure pixel-perfect implementation. - Bridge design and development: collaborate more effectively by directly tweaking live pages. - Save and reuse presets: build a library of reusable styles and apply them consistently across projects. 1. Activate the Extension: click the UI Inspector icon in your browser toolbar or press Alt/Option + Shift + I. 2. Inspect and Edit Elements: hover over any element to select it and instantly view its adjustable styles. 3. Modify Styles Visually: use the intuitive interface to change typography, layout, spacing, backgrounds, borders, shadows, and more. 4. Save and Apply Presets: create style presets for consistent design and apply them to any element on any site. 5. Export and Share: copy CSS in multiple formats, capture screenshots, or export changes as a GitHub issue. Compatible with any Chromium browser that supports the Side Panel API. For best results, ensure your browser supports all required APIs. If installation issues arise, update your browser to the latest version and try again.

TailwindCSS Studio

Build, design and debug your Tailwind website visually with TailwindCSS Studio, right within the browser. - 👀 Live editing: Instantly see the result of every change you make. - ⚙️ Autocompletion: Suggest the right classes for you as you type. - 🧂 Color preview: See the color of every class in the autocompletion view. - ⬅️ Easy navigation: Hover over any element to see its Tailwind classes. Press Space to easily pin and edit the element. - 🌟 Persistence: Remember all your changes to every element so you can copy all changes at once! - 💡 Automatic code update: Automatic synchronization with local source code. support for code rollback, no need to worry about errors in code updates. - 😊 Copy element class or html: Copy element class or html by one click.

Jinno: code any React component with AI

Develop html or react components with AI and chat GPT4. We can modify the React, HTML and CSS code for you. Change your react website and with AI tool, we will export the code for you to you visual studio code. We have support for React, css, HTML code. We use AI platforms to modify your react component. Save all stylesheet/javaScript changes in one place. Jinno is a Javascript viewer tailored for developers. Get access to the useful styles with our Chrome extension. Our mission is to let developers to focus on code with AI, and spend as little time as possible digging in a css code of React. FEATURES ✓ Find any React open source component ✓ Build design system ✓ Build storybooks ✓ Export React code ✓ Export Html code ✓ Export Css code ✓ Color picker ✓ Best tool for designers ✓ Syntax highlighting ✓ Share you css design with developers ✓ Font family picker ✓ Design your page the same as Figma ✓ Page ruler from Sketch ✓ Hover css inspector ✓ Inspect element tool ✓ Detect your devtool position ✓ Save your css stylesheet changes from your Inspect element ✓ DevTools integration ✓ Copy to clipboard ✓ Data export ✓ React support ✓ CSS support ✓ Javascript support ✓ Design like sketch ✓ Design like Figma ✓ Design like Webflow

Web Component DevTools

Developer tooling for Web Components and Web Component Libraries Developer tooling for Web Components and Web Component Libraries Web Component DevTools is aimed at all developers working with Web Components. The tooling provided creates a new Chrome Devtools panel, which allows a quick look at the custom elements on the current page, and enables modification of attributes and properties of said components. Web Component DevTools utilizes the Custom Elements Manifest (https://github.com/webcomponents/custom-elements-manifest) to analyze the Web Components. Web Component DevTools provides advanced features to the developer, straight from the browser's UI to, for example: - Listing custom elements on the page, and accessible iframes inside the page - Filtering custom elements on the list - Inspecting and modifying the attributes of custom elements - Inspecting and modifying the properties (even objects and arrays) of custom elements - Observing dispatched events - Calling functions of the custom element, and logging the return values - View the source code of web components on page - Interact directly with web components through the console In the process of developing Web Components, wether it be with a library like Lit, or without any kind of library, there comes situtations in which you might want to have a bit more control over your components than what the regular browser devtools gives you. You might for example want to: Toggle the Attributes of the element Toggle the Properties of the element Monitor when events get dispatched from the element Call functions And when you're working with Web Components, Shadow DOM usually is present, making it fairly difficult to find the path to the element. And even if you got the path, having to write document.querySelector("my-selector-string > element-name").setAttribute("my-attr", "foo") every time you want to modify a value is quite cumbersome. For this use case the Web Components DevTools were created: To enable the developer to easily modify the attributes, properties and therefore state of their element straight from the devtools window with the click of a button. Any issues you run into while using the DevTools should be submitted to the GitHub Repository (https://github.com/Matsuuu/web-component-devtools/issues).