Your designs stay on your computer. The editor runs completely in your browser: nothing you draw, open or save is uploaded to open-hw.net or any other server. More about privacy

Getting started

1. Set the panel size in the toolbar (Panel W × H), or open Panel settings for corner radius, free-form outline, DXF outline, background and mounting holes.
2. Add elements with the Add buttons. A new element appears in the middle of the panel; type its X/Y on the right or drag it.
3. Save regularly – that is your editable design file (.panel.svg).
4. Save for printing… makes the file for eufyMake Studio (or any printer software): text as outlines, SVG or PNG.

Keyboard

Ctrl/Cmd + S	Save the design (writes back to the same file in Chrome/Edge)
Ctrl/Cmd + Shift + S	Save as…
Ctrl/Cmd + P	Save for printing…
Ctrl/Cmd + Z	Undo
Ctrl/Cmd + Shift + Z  or  Ctrl/Cmd + Y	Redo
Ctrl/Cmd + D	Duplicate the selection (offset 5 mm right, 5 mm down)
Ctrl/Cmd + G	Group the selected elements
Ctrl/Cmd + Shift + G	Ungroup
Ctrl/Cmd + A	Select all elements
Del / Backspace	Delete the selection – or, with the panel selected, the selected outline point
← → ↑ ↓	Move the selection by the snap step (0.1 mm when snap is off); with the panel selected: move the selected outline point
Shift + arrows	Move 10 × the snap step
Esc	Deselect · in Measure: clear the measurement, press again to leave Measure
M	Measure tool on / off
G	Dot grid on / off
? or F1	This manual
Enter (in a field)	Apply the value (same as Modify)

Keys only act on the drawing when no input field has the focus – click on the drawing first.

Mouse

Click	Select an element (a group member selects the whole group)
Shift/Cmd + click	Add to / remove from the selection (also in the element list)
Drag an element	Move it (and everything selected with it); snaps to the grid
Drag on an empty spot	Rectangle selection (elements completely inside); with Shift: add to the selection
Double-click a group member	Edit that member on its own
Click an empty spot of the panel	Select the panel (settings on the right)
Free-form outline: drag a purple handle	Move that outline point · double-click the outline to add a point
Ctrl/Cmd + wheel, trackpad pinch	Zoom at the mouse position · Fit shows the whole panel
Wheel / trackpad	Scroll the drawing

The status bar shows the mouse position in mm – snapped to the grid when Snap is on (a small blue cross marks the grid point; hold Alt for the exact position) – plus the anchor (reference point) of the selection and its bounding box.

Coordinates and conventions

• All values in mm. Origin (0, 0) = lower-left corner of the panel, X to the right, Y up (as in Front Panel Designer).
• Rotation of elements: counter-clockwise positive.
• Rotary scales and circular hole patterns: 0° = 12 o'clock, clockwise positive (−135…135 = 270° pot).
• Shapes / DXF arcs: angles counter-clockwise from +X, as in CAD.
• The reference point of an element is the X/Y you type (centre or a chosen corner). For a group or a multiple selection it is the centre of the bounding box.
• With live ticked every change is drawn at once; untick it to change several values and apply them with Modify. Revert restores the values from when you selected the element.

Panel

• Outline: Rectangle (with corner radius) · Free form (points x, y [, radius] – or drag the handles) · From shapes / DXF: all shapes with the role panel outline are joined into a closed contour. Choosing From shapes converts the current outline into editable line/arc shapes; use Import DXF outline… to replace it by a DXF. Open ends are circled red.
• Background: none, solid colour, linear or radial gradient, or an image (fill / fit / stretch, opacity, optional bleed into the margin).
• Cutouts are see-through: nothing is printed where material is removed (on by default).
• Mounting holes with diameter, inset and drill marks · Margin: extra space around the panel in exports.

Elements

• Cutout: circle, rectangle, slot, D-hole, double-D, polygon, D-sub (E…D) or a preset (M2…M5, LEDs, pots/encoders, jacks, toggles, BNC, SMA, USB-A/B/mini-B/micro-B/C, XLR / Neutrik D-size with its two M3 screw holes, DIN audio sockets with flange or nut mount). Connector presets are typical values – check your part's datasheet. Reference point (centre/corners), rotation, grid or circular pattern, drill mark (open cross for a centre punch, kept inside the outline). Rectangles can get corner drill holes (optional, with your drill Ø): drill the four corners, then saw or nibble from hole to hole. The holes touch the outline from the inside (or the rounded corner) and are on the drill marks layer, so they are on the drilling template.
• Rotary scale: ticks (lines/dots), arc or wedge, labels as numbers (lin/log) or your own list, e.g. OFF,1k,10k,100k; upright, along the circle or radial; knob outline guide.
• Linear scale: horizontal/vertical, same label options.
• Text: several lines, alignment, rotation, letter spacing, bold/italic, any font. Characters that cannot be printed – colour emoji, or symbols no font has – are ignored; spaces around them collapse to one space between words (or disappear at the start or end of a line), so they never shift the text: “GAIN 😀” is placed exactly like “GAIN”; “A 😀 B”, “A😀 B” and “A 😀B” become “A B”; “A😀B” becomes “AB”.
  Layout ▸ On a circle puts the text around a circle (e.g. around an emergency stop): X/Y is the centre, set the radius and the position (0° = 12 o'clock). Top reads clockwise over the top, Bottom reads counter-clockwise along the bottom – both stay readable. Letters keep their normal widths; letter spacing works as usual. A dashed blue circle shows the radius in the editor.
• Line, Rectangle (frame, optional fill), Circle / arc.
• Graphic: logo or picture (SVG, PNG, JPG) with size, rotation, opacity; SVG stays vector.
• Shape: line, arc, circle or polyline with a role: engraving (lines, or filled for logos), cutout, panel outline or guide.

Drill marks ▸ Apply to all sets the chosen mark on every cutout and the mounting holes. Print view / Template view switch the layers for decoration printing or a drilling template.

Selecting and grouping

• Select several elements with Shift/Cmd-click or a rectangle, then Group. A group moves, duplicates and deletes as one; type its Centre X/Y to place it.
• Double-click a member (or click it in the list) to edit it alone; Ungroup dissolves the group.
• A group that contains shapes (e.g. an imported DXF) has Use the shapes as: lines, filled logo, cutout, panel outline or guide.

Measure

Press M or Measure and click two points: distance, ΔX, ΔY and angle. It snaps to reference points, hole centres, corners, line ends, panel corners/edges and any point on an outline (square = point, diamond = outline); anywhere else it snaps to the grid when Snap is on. Two outline points also give the shortest edge-to-edge distance (green). Shift = horizontal/vertical only · Alt = no snapping · Esc clears / leaves.

DXF import

DXF… in the toolbar, Import DXF outline… in the panel settings, or drop a .dxf on the window. Reads LINE, ARC, CIRCLE, LWPOLYLINE/POLYLINE (bulges), SPLINE, ELLIPSE and blocks; text and dimensions are skipped. Choose units and position, then what the drawing is:

• Automatic – largest closed contour = panel outline, closed contours inside = cutouts, open lines = guides (or engraving).
• Logo / drawing, filled – closed contours are filled (holes in letters stay open), like a graphic.
• Lines, Cutouts, Panel outline or Guides for everything.

All shapes of one import form a group; you can change their use later in the group settings, or ungroup to edit single lines, arcs and circles.

Fonts

Six fonts are built in. When online, about 65 popular Google Fonts can be picked in every font list, or any other by name (Other Google font…); they are downloaded once and then work offline. + next to a font list loads your own .ttf/.otf/.woff. Fonts that are not built in are stored inside your design file.

Files

• Save / Save as… – design file name.panel.svg: every element with all settings, groups, text as text, images and non-built-in fonts. Each element has a readable comment.
• Open… – a design file; an ordinary SVG/PNG/JPG can be placed as a graphic or background; a .dxf opens the DXF import.
• Open by link – a link such as …/fpe/?open=examples/k40-laser-controller.panel.svg opens an example design that lies on the same website straight in the editor. Save it to keep your own copy.
• Save for printing… – print file: SVG or PNG (300/600/1200 dpi, optional transparency), text as outlines, no editor data.
• Everything stays on your computer – nothing is uploaded (see Privacy). Your current work is also kept in this browser between visits.

Privacy – your files stay on your computer

• The editor is a single web page that runs entirely in your browser. There is no account, no login and no server-side processing.
• Nothing is uploaded. Designs, images, DXF files and fonts you open are read by your browser only; they are never sent to open-hw.net or anyone else.
• Save and Save for printing write files to your own computer (the folder you choose, or your downloads folder).
• Your last design, your own fonts and the downloaded Google Fonts are kept in your browser's local storage on this computer, so they are there on your next visit. They never leave your computer; clearing the site data in your browser removes them.
• The only internet traffic after the page has loaded: when you pick a Google Font, the font file is downloaded from the jsDelivr CDN (Fontsource mirror of Google Fonts). Only the font name is requested – none of your design data. The built-in fonts need no internet at all. An example opened by link (?open=…) is downloaded from this website; that is a download only.
• Once the page is open you can even work offline; you can also save the page (index.html) and open it from your own disk.

Printing (eufyMake Studio and others)

• Print view: engraving, panel background and outline – for DTF stickers or direct printing.
• Drilling template: outline, cutouts and drill marks, always in black on white (the panel colours are ignored) – print on paper or directly on a blank panel, centre-punch through the open crosses.
• If gradients, images or see-through holes do not show in your printer software, use the PNG export (600 dpi, transparent background).

Tips

• The ▲▼ arrows of number fields step positions and sizes by the snap distance (0.05 mm when snap is off); line widths, gaps and text sizes by 0.05, angles and percentages by 1. You can always type any value.
• Snap off + arrow keys move the selection in 0.1 mm steps.
• Grid (or G) shows a dot grid at the snap distance, starting at the panel origin; every 10th dot is bigger. When zoomed out, the dots thin out automatically (2×, 5×, 10× the snap step); hover the Grid button to see the current spacing.
• New elements copy the style (font, sizes, line widths) of the last element of the same kind.
• Check connector cut-out sizes against the datasheet of your part.

Front Panel Editor v1.7.4 · © 2026 open-hw.net · GNU GPL v3 · Fonts: SIL Open Font License, DejaVu: Bitstream Vera licence · opentype.js: MIT.