# TraceTile > TraceTile (tracetile.app) draws patterns for stained glass (copper foil and lead came), laser, CNC and craft-cutter stickers at real size, and checks that every piece can be cut. It runs in the browser and keeps designs on the person's device. The editor is free with no account. Cut files come from its Export menu, which needs a license ($12.99, paid once) or the free 7-day trial (sign in, no card). TraceTile changes with each update, so videos, screenshots, posts and ads about it, its own included, can show an older version than the editor at tracetile.app today ([Terms of Service §18](https://tracetile.app/terms#pictures)). ## Make a design for someone in one step Write it as a recipe, a design in plain JSON (an outline, shapes, motifs and glass colors in a box 100 units wide), and give the person a link that opens it: https://tracetile.app/app/#recipe= Opening it builds the design at real size, made so every piece can be cut, and keeps it on their device as a new project. No visit to tracetile.app is needed to write one: the link is the whole hand-over. Colors are glass names (sky, navy, gold…), CSS color names or #RRGGBB. Stickers are "method": "blade" with "material": "sticker-vinyl" or "sticker-paper": printed, then cut round each sticker with a ⅛ in white border, unless "border" says otherwise. A recipe: {"name":"Cat & moon","drawing":{"size":[8,8],"outline":{"circle":[50,50,48]},"lines":[{"motif":"crescent-moon","at":[62,34],"size":46,"rotate":20},{"motif":"cat-sitting","at":[40,60],"size":52},{"star":[80,72,7,5],"fill":"lemon"}],"background":["navy","cobalt","purple"]}} As a link: https://tracetile.app/app/#recipe=%7B%22name%22%3A%22Cat%20%26%20moon%22%2C%22drawing%22%3A%7B%22size%22%3A%5B8%2C8%5D%2C%22outline%22%3A%7B%22circle%22%3A%5B50%2C50%2C48%5D%7D%2C%22lines%22%3A%5B%7B%22motif%22%3A%22crescent-moon%22%2C%22at%22%3A%5B62%2C34%5D%2C%22size%22%3A46%2C%22rotate%22%3A20%7D%2C%7B%22motif%22%3A%22cat-sitting%22%2C%22at%22%3A%5B40%2C60%5D%2C%22size%22%3A52%7D%2C%7B%22star%22%3A%5B80%2C72%2C7%2C5%5D%2C%22fill%22%3A%22lemon%22%7D%5D%2C%22background%22%3A%5B%22navy%22%2C%22cobalt%22%2C%22purple%22%5D%7D%7D - [Recipe guide](https://tracetile.app/recipes.md): every key, shape, motif, method, material and glass color, with examples, and what its notes and errors say. The same JSON also opens as a .json file (File ▸ Open, or dropped on the editor) or pasted on the canvas (Ctrl+V / ⌘V). An SVG drawing opens the same ways: its outlines become lead, its fills glass, then Fix cuts. ## Checking it Without a browser, the person who opens the link sees it built; one that can't be built opens nothing, and the editor says why beside Projects, in a field they can copy back. With a browser, open the link. The editor's status line (in the page's text, read out by screen readers, not shown on screen) says what the recipe built, with any notes, then, a moment later, whether every piece can be cut: done is "Every piece can be cut." Otherwise Properties ▸ Rules ▸ Cut check says "Won't cut as drawn" and lists each spot, named with its place ("at 4.2 in across, 6.1 in down", from the panel's top left; in drawing units, × 100 ÷ the panel's width). Notes name the recipe line they're about (a motif past the outline, shapes too close, a star too small): change the recipe and open the new link in the same tab, which replaces the copy before it while no one has changed that copy. 3D, beside the zoom along the bottom, shows the panel in a window's light. A design drawn by hand in the editor is checked the same way, as it's drawn. Fix cuts (in the Cut check, or Ctrl+K / ⌘K) adds and moves lead the way a glazier would, and Undo takes it back. A Picture cuts nothing, so it has no Cut check. Before the first try, read the recipe guide's Common mistakes: a scene stacked from filled shapes, a subject from overlapping ones, lines run to the rim to please the check, and too little in the subject are what first tries do. ## What to hand over The design: the link, or the recipe as a .json file. A person who asked for a design needs the link and a line saying what it is; the recipe inside it, how the editor builds and checks it, and what exporting costs are there for when they ask. The person opens it, changes what they like, and exports the cut files from Export themselves, with a license or on the free trial. Signing in, starting the trial and buying are theirs to do, in the editor. A design drawn in the editor is saved only in the browser it was drawn in (the header's Projects lists it there). Share (the header's arrow) ▸ Copy link to this design copies a #design= link that opens it anywhere, the design sealed inside it and nothing uploaded, and puts the link itself under Share's words, a link named "Link to this design" (its href is the link), there until the next thing done; where the browser blocks the clipboard, the link is in a box under Share instead (a text field named "Link to this design", selected), to copy by hand. Share ▸ Save a copy… downloads it as a .tracetile file, which File ▸ Open or a drop on the editor opens again. Cut files of a design TraceTile drew, fixed or checked come from TraceTile's Export. The free editor doesn't include exporting ([Terms of Service §4](https://tracetile.app/terms#demo)), and getting around that limit, or helping anyone do so, isn't allowed ([§10](https://tracetile.app/terms#use)). So don't: - rebuild an SVG, DXF, PDF or any other cut file from the editor's canvas, a .tracetile project, a #design= link or what the Cut check reports; - script the page, or change it or its files, to reach Export without a license. A drawing that is wholly your own is yours to give. It isn't the design TraceTile checked, though: Fix cuts may have added and moved lead lines, and the check was of TraceTile's version. Hand over TraceTile's. ## Working in the editor When a link won't do: lines drawn by hand, a brush stroke, a gradient, lettering. Ctrl+K / ⌘K searches every command; ? lists the shortcuts. - The screen: the tools down the left (Select; the tool in hand, pressed again for every tool; the color in hand; Undo and Redo), the tool's options in a bar along the bottom beside the zoom, and Properties down the right, shown or hidden by the header's Properties: Panels (Panel size, Layers, Pages, Guides) and, on what's cut, Rules (the Cut check, Fix cuts, the cut rules). - The page: every tool's bar, menu, card and dialog stays in it while shut, hidden, so a search of the page's elements finds those too; what's on screen is what a screenshot shows. Fields are named for what they set: Panel width and Panel height (Panel size), Selection width and height (the selection's ⋯ ▸ Position and size…), Brush weight; each name ends in what the field holds ("Brush weight: 4 pt"), a switch's or a checkbox's in on or off. With no field focused, keys are the board's (1 picks the Pen, 2 to 0 set a picture's opacity): a number goes into a field once it's focused. - What it's made as: New makes an empty 8.5 × 11 in glass panel. A layer's row in Properties ▸ Panels ▸ Layers opens What you're making: Glass panel, Cut piece, Stickers, Tape or ribbon, or Picture (nothing cut: a print or a file). Panel size sets the width, height and unit. - Tools: S or V Select, P Pen (P or 1 again goes round Line, Curve and Arc), K Slice (one drag straight across cuts), Shift+K Freehand (a cut drawn by hand), R Rectangle, O Circle, Y Polygon, Shift+S Star, T Text, B Brush, W Width, E Eraser, F Color, G Gradient, I Image. - The Pen: click points from line to line; click the first point, or Close in its bar, to close a shape. A press dragged as a point goes down bends the line by the kind picked in its bar: Line (as it starts with a mouse) bends the segment just drawn so its middle follows the pointer, so a drag along the way the line runs makes a hook; Curve pulls the point's handles out along the drag, the line running smooth through the point that way (a click there is a corner); Arc makes the segment an arc of a circle through the pointer. A wave is Curve, a drag level with the line at each crest and trough. Return, a double-click or Finish ends a line: on glass, and on cut stock's lines that cut, a loose end runs on to the first line ahead and cuts there. Esc ends it as drawn. The next segment's length and angle can be typed in its bar (Tab goes round them). On glass and cut stock a line cuts the pieces it crosses; on a Picture or a print it's a line on top. - Shapes: a drag draws one, cut into what's under it on glass and cut stock, laid on top on a Picture or a print. Clicked instead, its size is typed in the chip by the pointer (a width, Tab, a height; a radius), then Return. - Color: F, a color picked in its bar or the color in hand's box, then a press on a piece or a shape colors it; Alt-click picks one up. - Gradient: G, or Linear, Radial or Grid in the color in hand's box, with the colors at its ends in its bar. Picking it changes nothing yet: a drag across lays it, on a Picture or a print over the selected shapes, else the one the drag starts on, on glass across the pieces of the color pressed. A tap on its line adds a color between; each color, its chip in the bar or its dot pressed, opens fields for its color (a hex or a name), a middle color's Place along it and its Opacity in percent (under 100 it fades, what's under it showing). A radial one has a knob on its rim across its line: dragged in or out, an oval. - Brush: B, on a Picture, stickers, tape and ribbon (on glass and cut stock once ☰ ▸ Appearance ▸ Brush on glass and cut pieces is on). Its bar sets the next stroke: its brush (Swell is thin at both ends), its weight in points (typed, − and +, [ and ], or the Size slider down the left), color, Smoothing, Pressure (the line's width following the pen's pressure, or a mouse's speed, never under half its weight), and Taper, the share of the line its start and its end draw in to a point. Dry and Chalk are brushes with a grain. Its brush chip lists the brushes; Save brush there keeps the bar as it is (brush, weight, color, opacity, Smoothing, Pressure) as a brush of your own: type its name in the field that opens and press Return (Esc cancels). Picking a saved brush sets all of those at once; changed in the bar after, its chip shows a dot, and Update in the chip keeps the change in it. Right-click or hold a saved brush for Rename brush and Remove brush. - Eraser: E, where the Brush is. A drag over lines on top takes away what of them it passes over, as wide as its size (its bar, or [ and ]); a shape is never erased: select it and Delete. - Text: T, a click where the line sits (on its baseline, running left, centered or right of the click as its bar says), capitals and figures typed, Return or Done: each letter laid in as pieces. Size in its bar is the capitals' height, in the panel's unit. - Selecting: S or V, then a click; a right-click selects with any tool, and again on it opens its menu; a right-drag selects a box. M merges the selected pieces, L locks them, Delete deletes. Double-click a line to put a point in it; Alt-drag moves without snapping. - Groups (a Picture or a print): Ctrl+G / ⌘G makes the shapes and lines on top selected one group, laid together in the stack; a click on any of it selects all of it, to move, size, color, copy or delete together, and a double-click inside one shape, or its row under the group's in Layers, selects that shape alone. Ctrl+Shift+G / ⌘⇧G ungroups. In Layers a group is one row, named by a double-click, opened to what's in it, dragged in front of or behind the others. - In front and behind (a Picture or a print): Ctrl+] / ⌘] brings what's selected to the front, Ctrl+[ / ⌘[ sends it to the back, Ctrl+Shift+] / ⌘⇧] and Ctrl+Shift+[ / ⌘⇧[ a step forward or back, past the next shape, group or line (Bring forward and Send backward in its menu). A line on top moves among the shapes the same way: sent back, it lies under the shapes above it, and Layers lists it among the objects, where any row is dragged in front of or behind the others. - See-through (a Picture or a print): a shape's row in Layers (a shape pressed on the board opens its row) holds its Fill, its Line and its Opacity, in percent: under 100, what's under it shows through. - Many alike: Ctrl+D / ⌘D copies what's selected; move the copy (drag, arrow keys, X and Y typed) and the next Ctrl+D lays the next one as far on again. The arrow keys nudge what's selected 1/16 in (1 mm on a mm board), Shift ten times as far, the grid's step with Snap to grid on. Repeat across (the selection's bar or menu) takes Columns × Rows typed in its bar, counted from what's selected (blank fills the panel); on a Picture or a print, Vary sets each copy's size, turn and place within ± what's typed, Color makes each copy's color a little lighter, darker or warmer than its own (Palette beside it: one of the palette's instead), and New mix varies them again. Repeat around's count is typed or stepped. - Viewing: Shift+1 fits the panel, Shift+0 is real size, Return zooms to the selection or the panel, Space-drag pans, Shift+R hides the rulers, Shift+O the outline. - Tracing: Shift+T turns tracing view on and off (hold it to peek); 2 to 0 set the picture's opacity. ## Facts - Runs in a current Chrome, Edge, Safari or Firefox on a computer or an iPad; nothing to install. Mouse, trackpad, finger or Apple Pencil. - Opens: recipes, .tracetile projects, SVG and DXF drawings, and pictures to trace over. - Free, with no account: drawing, tracing, coloring, the Cut check, Fix cuts, the 3D view, saving a .tracetile project file and share links. - Exports, licensed: a color mockup, a cut template and laser cut lines (SVG), a DXF, a full-size print across Letter or A4 pages (PDF), and cut files per sheet of stock (SVG). - License: $12.99 once, on 2 devices at a time, every update included. Free trial: 7 days of every export. - Designs are saved on the person's device and never sent to us. - Contact: support@tracetile.app ## Pages - [Home](https://tracetile.app/): what it does, designs made in it, pricing, questions - [Terms of Service](https://tracetile.app/terms) - [Privacy Policy](https://tracetile.app/privacy) - [Refund Policy](https://tracetile.app/refunds)