Tilda School Helper

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

✨ Tilda School Helper is a set of ten tools for inspecting and copying 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. 📸 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. 🖼️ 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. 📖 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. ⌨️ 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).