Tilda School Helper

Fonts, ruler, spacing, eyedropper, annotated screenshots, site styleguide, images & SVG, screen preview — for web layout.

✨ Tilda School Helper is a big set of tools for inspecting, copying and capturing web layout right on the page. Handy with Tilda and any website. 🧰 TOOLS 🔤 Fonts. Hover over any text to see its font, size, weight, line height and color. A click copies the font-family. The "Font" line shows the real font name from the file (like Fonts Ninja) — e.g. "Graphik LC Web Medium", not the internal alias that Tilda assigns: the extension pulls the @font-face rules (including from third-party stylesheets) and reads the name embedded in the actual font file for that weight. The "License" line hints at the source: green — free (system, Google Fonts or a free web font), orange — paid. Well-known commercial fonts (Adderley, Circular, Gilroy, Proxima Nova, Futura, Gotham and more) are recognized by name, and for them it suggests a close free Google Fonts alternative. Alt+click (⌥ Option+click on Mac) opens the Google Fonts page, Shift+click copies a direct link to the font file when available. 📏 Ruler. Three modes: "Box" — element dimensions; "Free" — a drag-out measuring frame not tied to elements; "Anchor → target" — the distance between two elements. 🎨 Eyedropper & colors. Grab the color of any pixel or collect a palette of the colors actually used on the page. A click copies the HEX. 📐 Guides. Rulers on the top and left, like in Figma: drag guides, read coordinates, pick a line color to match the site. Snap magnetizes lines to element edges and centers, and "sticky" mode pins them in place on screen while scrolling. Hold Shift to see the distance in pixels between neighboring lines, and Shift+click drops an anchor to measure any pair of lines. 🧱 Wireframe. Shows the page structure without the "noise": outlines elements by type (containers, text, media, controls), can desaturate the page to black & white and replace images with gray blocks — to judge the grid, rhythm and hierarchy without being distracted by color and content. Outline coverage toggles: all elements, Tilda blocks only, or off. Nothing is written into the page markup. ‹ › Element → CSS. Click any element on the page and a side panel gathers its clean CSS (only the meaningful properties: font, color, background, borders, radius, shadow, flex layout, spacing), ready to copy as one block. Plus Tilda context: block id (#rec…), block type (a numeric T-class or Zero Block T396), for Zero Block — the atom type and its position on the artboard, for the classic grid — the column number. A quick way to lift styles from someone else's site or double-check your own layout. 📸 Annotated screenshots. Capture the window, a selected region or the entire page. The window capture can hide the scrollbar, a fixed menu and cookie banners with widgets. Region screenshot — precise edge adjustment by handles (crop) before capturing. Full-page capture scrolls and stitches frames, with animations frozen. Built-in editor: rectangles, ovals, lines, arrows, brush, marker, text, numbered labels, blur, cropping, a color picker, a background for social media, saving to PNG, JPEG or WebP (with a quality choice) or copying to the clipboard. 🎥 Screen recording (beta). Record a video of the tab, a single window or the entire screen — or just a selected page area — to a WebM or MP4 file. Microphone (with device selection), tab audio and a camera bubble over the recording, Loom-style: the bubble is draggable and ends up in the final video. While recording — a REC plate with a timer, pause and stop. The finished file is saved via "Save as", and optionally Finder/Explorer reveals it in its folder right away. Everything is recorded and saved locally, nothing is uploaded. A beta-set tool — see "Beta mode" below for how to enable it. 🖼️ Images & SVG. Collect every image on the page (including background and inline SVG), see the size and source URL, remove duplicates. Filters by type, by pixel size and a weight slider — to filter out small stuff like icons and tracking pixels. Download them one by one, in a batch or as a single ZIP archive. ⚡ Image optimization. A page-weight audit: for each raster image you see its on-screen size vs. the real file size and its weight, flagged as "oversized ×N" (the image is loaded larger than it's shown — wasted pixels beyond 2× retina), "heavy" (≥300 KB), "upscaled" (the natural size is smaller than shown — blurry) and "PNG → WebP". A summary up top: total weight, how many images are oversized and roughly how much you can save. A button copies the report. Helps explain why a page loads slowly. 🎯 Design overlay. Drop a PNG/JPG mockup on top of the live page and align it with the layout pixel by pixel: opacity, scale (including "fit width"), drag with the mouse and fine-tune with arrow keys (1px, 10px with Shift). "Difference" mode turns matching pixels black — instantly showing where the layout drifts from the design. The "Click-through" button makes the mockup transparent to the mouse so you can work with the page underneath. 📖 Site styleguide. One click and you get the design system of the open page: a palette with roles (background, text, borders) and shade grouping, WCAG 2.1 contrast checking, gradients, live button samples with their real styles, typography with font-license detection and live samples, a spacing scale, brand corner radii and shadows, the site's own CSS variables. Clicking a font, button, contrast pair, spacing value or corner radius highlights every place with that value right on the page (arrows page through the finds) — easy to spot the odd one out; Alt+click copies the value, everything else copies on a plain click. Export: CSS variables (:root with tokens), Figma Tokens (Tokens Studio), a Tailwind config snippet, JSON, a shareable PNG card, a .tildastyles file to import into Tilda (choosing which colors, fonts and buttons go into it) and printing to PDF. History keeps the last 10 analyses, and compare mode shows what two sites have in common and how they differ. Perfect for taking references apart. 📱💻 Screen preview. Open a site in a device frame — mobile (iPhone, Pixel, iPad) and desktop (1366, 1440, 1680, Full HD 1920, 2K 2560). The desktop canvas renders at real width and shrinks to fit the window if it's smaller — on a laptop you can see how the site looks on a large monitor. "Responsive" mode — freely drag the viewport size by the edges and corner, or set an exact width and height, to catch "breaking" widths. The "Guides" button turns on rulers and guides right inside the preview — check the grid and spacing like in Figma. ↔️ Spacing (manual). Check that vertical gaps between blocks are equal: click two blocks and the gap is shown. Measure several gaps: matching ones are highlighted green, outliers red with the difference in pixels. The reference is picked automatically (the most common gap) or set manually — by clicking the gap band you want. 🧪 Beta mode. Some tools — Element → CSS, Design overlay, Image optimization and Screen recording — are still in the beta set: they are being polished and carry a "beta" tag in the menu. Enable them with the Stable | Beta pop | Beta side switch in the top-right corner of the built-in help (the "?" button in the popup header). Beta pop additionally shows a floating tool menu right on the page (like the VisBug panel): you can drag it, collapse it into a sticker bubble and switch tools one after another without opening the popup. Beta side opens the same menu in the Chrome side panel — next to the page, and the panel stays open while you work. Stable is the regular menu without beta tools. ⌨️ All tools work on top of the page. Exit any of them with the Esc key. The bright "?" button in the popup header opens the built-in help, and the "↻" button clears the cache and reloads the page — a full reload without stale cache, for when fresh layout edits aren't picked up. Frequent tools can be triggered with keyboard shortcuts: region screenshot — Ctrl/⌘+Shift+U, fonts — Ctrl/⌘+Shift+F, ruler — Ctrl/⌘+Shift+L, guides — Ctrl/⌘+Shift+Y, and you can assign your own key for screen preview (all configurable at chrome://extensions/shortcuts). 🔒 The extension does not collect or transmit any data: everything runs locally in the browser. 🎓 A free tool from Tilda School (tilda.school).