Quote Element

Highlighted, expressive content

The Quote element is a specialised variant of the Textbox, designed for displaying testimonials, pull quotes, epigraphs, and other forms of emphasised text. It inherits all the power of a Textbox but comes with a distinct visual identity that draws attention and conveys authority.

• Elevated defaults – serif font, larger size, italic style, and a creative purple colour.
• Fully customisable – every typographic and layout property can be adjusted.
• Field conversion – turn it into a Label or Input while keeping its unique styling.
• Responsive resizing – choose how it adapts to content length.
• Perfect for – testimonials, pull quotes, opening statements, and highlighted messages.

Example of a Quote element on the canvas with its distinct styling and properties

The Quote element is not just a stylistic choice – it is a functional distinction that signals to the reader: “This is important. This deserves your attention.” It breaks the visual rhythm of a page, adding personality and depth to your templates.

Default Settings

When you add a new Quote element, it comes with these carefully chosen defaults to make it immediately usable for highlighted content:

When to Use a Quote

Typography and Styling

While the Quote element comes with thoughtful defaults, you can customise every aspect to suit your needs.

Font Family

The default Georgia serif is classic, but the font picker gives you access to hundreds of Google Fonts. Swap to a sans-serif like Inter for a modern look, or Playfair Display for a more literary feel.

Font Size

Defaults to 18px – larger than body text for prominence. Increase for hero quotes, decrease for subtle asides.

Color

The default purple (#4c1d95) is bold and creative. Change to any colour that aligns with your palette – dark grays and deep blues for sophistication, warm oranges or rich reds for energy.

Italic and Decoration

The italic style suggests a distinct voice. You can keep it or switch to normal. Underlines or uppercase can add further emphasis.

Alignment

Centred alignment gives a formal, balanced look. Use left alignment for longer quotes to improve readability, or justified to fill the width.

Layout and Spacing

Padding and Margins

Adjust vertical and horizontal padding to make the quote feel more spacious or more compact, depending on the visual weight you want it to carry.

Background and Border

Change the background colour to make the quote stand out more. Adjust the border width, style, and colour, or remove it entirely. Use border radius to control corner rounding – larger radii create a softer feel.

Text Shadow

Add a text shadow for a lifted, three‑dimensional effect – especially effective over busy backgrounds. Use it sparingly for subtle depth.

Resizing Behavior

The Quote element offers the same resizing options as the Textbox:

• Fixed – container stays the size you set; text may overflow. Works well when you know the quote’s length in advance.
• Auto Width – container wraps tightly to the text horizontally; height stays fixed. Ideal for short, single‑line quotes.
• Auto Height – container expands vertically to fit the text; width stays fixed. Better for longer quotes that span multiple lines.
• Auto Both – expands in both directions, wrapping completely around the text. Perfect for quotes of unpredictable length.
• Shrink to Fit – automatically reduces font size when text overflows, ensuring all content remains visible without expanding the container. Especially useful for fixed‑width layouts and dynamic content.

Field Behavior

Like the Textbox, the Quote element can be converted into a form field by changing its Field Type in the Properties Panel.

• Label – displays static text that describes or identifies an input field. The label title, description, required indicator, and placeholder all inherit the quote’s styling.
• Input – becomes an interactive text field that collects user input. The same styling (italic, serif, centred) applies to the user’s response, making it feel personal and thoughtful.
• Label & Input – combines both in a single element, ideal for compact form rows.

Use Cases and Examples

Tips & Best Practices

Image Element

Visual storytelling made easy

The Image element allows you to display photographs, logos, illustrations, icons, and any other graphical content. More than a simple picture holder, it comes with rich controls for cropping, scaling, tiling, enhancing, and styling – giving you the power to make every image look its best without leaving the editor.

• Upload – choose an image from your device; stored as a data URL.
• Object‑fit – control how the image fills its box (cover, contain, stretch, original, scale‑down).
• Tile – repeat the image to create patterns.
• Enhancements – fine‑tune exposure, contrast, saturation, temperature, tint, highlights, and shadows.
• Effects – opacity, blur, border, border radius, drop shadow.
• Field behavior – convert into a Label or Input for form‑based image uploads.

Example of an Image element on the canvas with its properties panel visible

The Image element is your gateway to visual storytelling. Whether you are adding a hero image to a flyer, a product photo to a catalog, or a decorative background to a form, it provides the flexibility and control you need to achieve professional results.

Default Settings

When you add a new Image element, it comes with these defaults:

Uploading and Managing Images

Uploading an Image

To add an image, select the Image element and click the "Choose Image" button in the Properties Panel. This opens a file picker. Supported formats include JPG, PNG, GIF, WebP, BMP, SVG, TIFF, ICO, AVIF, and HEIC.

The image is converted to a data URL (base64 encoded) and embedded directly into the template's JSON. This makes the element self‑contained and portable – it persists after page refresh and does not require an external server.

• File size – data URLs increase template size. Optimise images before uploading (compress, resize).
• Browser limits – very large images may hit practical limits; compress first.
• Persistence – once uploaded, the image is part of the template and can be shared without the original file.

Clearing an Image

Click the "Clear" button in the Properties Panel to remove the uploaded image and revert to the placeholder.

Filename Display

The filename is shown below the upload buttons, giving you a quick reference to the source file.

Sizing and Scaling

Width and Height

Adjust the width and height manually using the number inputs in the Properties Panel (in pixels).

• Maintain aspect ratio by adjusting both dimensions proportionally.
• Consider responsiveness – fixed sizes work well for stable layouts.

Object‑Fit

Object‑fit determines how the image fills its container. Choose the option that best suits your design:

Tiling

The Tile feature repeats the image to create a pattern or texture.

• How to use: Toggle Tile ON in the Properties Panel, then adjust Tile Size (in pixels).
• Effect: The image is displayed as a repeating pattern, filling the container horizontally and vertically.
• Use cases: Background textures, wallpaper effects, seamless patterns.
• Note: Tiling sets the image as a CSS background with background-repeat: repeat. The original <img> is hidden.

Image Effects

Opacity

Controls transparency (0 = fully transparent, 1 = fully opaque). Useful for watermarks, overlays, and subtle backgrounds.

Blur

Applies a Gaussian blur (in pixels). Creates a dreamy effect, background depth, or privacy blur.

Border

Add a border with Width, Style (solid, dashed, dotted), and Color. Use for framing, highlighting, or separation.

Border Radius

Rounds the corners of the image container (in pixels). Use 50% for circular images (when width equals height).

Drop Shadow

Add a shadow behind the image with five properties: X offset, Y offset, Blur, Spread, and Color. Expand the Effects section in the Properties Panel to add or remove a shadow.

Image Enhancements

The Image element includes a powerful set of enhancement sliders that adjust CSS filters in real time.

Field Behavior

The Image element can be converted into a form field by changing its Field Type in the Properties Panel.

As a Label

Displays static visual content – typically an icon or illustration that accompanies a form field.

• Label Title – main text (e.g., "Profile Photo").
• Description – helper text.
• Required Indicator – e.g., "*".
• Placeholder – text shown inside the input.

As an Input

Becomes an interactive file upload field. Users click to select an image, which is then displayed.

• Field Name / Key – identifier for form data.
• Associated Label – link to a Label for accessibility.
• Input Type – set to "File".
• Accepted File Types – restrict extensions (e.g., .jpg, .png).
• Default / Pre‑filled Value – optional default image URL.
• Placeholder – text before an image is selected.

Use Cases

• Hero Images – full‑width cover images for flyers or landing pages.
• Product Photos – display with Contain object‑fit, add drop shadow.
• Logos – use transparent PNG, Contain fit.
• Background Textures – enable Tile with a small tileable image.
• Profile Photos – set border radius to 50%, use Cover fit, and convert to Input for user upload.
• Decorative Accents – add border, shadow, or reduce opacity/blur for subtle backgrounds.
• Form Upload Fields – convert to Input of type "File" with accepted file types.

Tips & Best Practices

Shape Element

Geometric visual structure

The Shape element is a geometric figure that adds visual structure, emphasis, and personality to your templates. From simple rectangles to expressive stars and hearts, shapes are the unsung heroes of visual design, providing the building blocks for everything from subtle dividers to bold accent pieces.

• Five shapes – rectangle, circle, triangle, star, and heart.
• Geometric precision – clean, crisp edges with mathematical accuracy.
• Color control – fill with any hex color to match your brand.
• Scalable – resize freely without losing quality.
• Layering – stack, overlap, and arrange in any z‑order for depth.

Example of different Shape types on the canvas – rectangle, circle, triangle, star, and heart

Shapes are the most basic yet infinitely versatile elements in Diterr. Their simplicity is their strength – with just a few shapes, you can create frames, badges, icons, backgrounds, and intricate patterns that bring your templates to life.

Default Settings

When you add a new Shape element, it comes with these defaults:

Shape Types

The Shape element offers five distinct geometric forms, each with its own character and use cases.

Rectangle

The most fundamental and versatile shape. Used as background blocks, dividers, card frames, and decorative elements.

• Default styling: Border radius 8px, orange-500 colour.
• Use cases: Section backgrounds, card frames, dividers, buttons, headers and footers.

Circle

A shape of harmony, completeness, and motion. Draws attention and creates focal points.

• Default styling: Border radius 50% (perfect circle), orange-500 colour.
• Use cases: Profile photos, badges, buttons, accent dots, background elements.

Triangle

A shape of stability, direction, and focus. Sharp angles convey energy and movement.

• Default styling: Clip-path: polygon(50% 0%, 0% 100%, 100% 100%), 0px border radius, orange-500 colour.
• Use cases: Arrow indicators, play buttons, ribbons and tags, decorative elements, directional cues.

Star

A shape of excellence, quality, and achievement. Instantly recognisable and often associated with ratings and awards.

• Default styling: Clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%), 0px border radius, orange-500 colour.
• Use cases: Ratings, badges, decorative elements, awards, seasonal themes.

Heart

A shape of love, care, and personal connection. Organic curves make it perfect for emotional or relationship-focused content.

• Default styling: Clip-path: path("M50 85 C20 60, 0 35, 0 20 C0 5, 20 -5, 50 20 C80 -5, 100 5, 100 20 C100 35, 80 60, 50 85 Z"), no border, orange-500 colour.
• Use cases: Romantic themes, health and wellness, customer appreciation, decorative elements, social media.

Customization Options

Changing the Shape Type

Use the dropdown in the Properties Panel. The shape updates instantly, preserving previously applied styles (color, size, rotation).

Changing Background Color

Set the fill to any hex color using the color picker in the Properties Panel. The colour applies uniformly across the entire shape.

• Use brand colors – match to your brand palette.
• Contrast with background – ensure visibility.
• Create gradients – layer multiple shapes with different opacities.

Resizing

Resize by dragging the resize handle or entering width/height values in the Properties Panel. Shapes have no aspect ratio constraints.

• Circle – set width and height equal for a perfect circle.
• Star and heart – adjust both dimensions carefully to avoid distortion.
• Triangle – resizing changes proportions; adjust carefully.

Rotation

Use the rotation slider (-180° to +180°). The shape rotates around its center point.

• Triangle – rotate to change direction (90° = point right, 180° = point down).
• Rectangle – rotating creates a diamond shape.
• Star and heart – rotation creates interesting visual dynamics.

Layering (Z‑Index)

Adjust the z-index in the Properties Panel. Higher numbers bring the shape forward; lower numbers push it back.

• Background shapes – place behind text and images for depth.
• Overlays – place shapes with low opacity over other elements.
• Accents – place small shapes on top to draw attention.

Creative Applications

• Background blocks – use large rectangles or circles as section backgrounds with low opacity.
• Dividers and separators – thin rectangles or circles create elegant separators.
• Iconography – combine shapes to create custom icons (e.g., rectangle + triangle = house).
• Pattern building – layer shapes of different sizes, colours, and rotations.
• Highlighting – use stars or hearts to highlight important content.
• Visual hierarchy – larger shapes draw more attention; smaller shapes guide the eye.

Limitations

• No child elements – shapes are decorative and cannot contain text, images, or other elements. Use a Frame for containers.
• No text support – layer a Textbox over a shape if you need text.
• No gradients – shapes support only solid colours. Layer multiple shapes for gradient effects.
• No field behavior – shapes cannot be converted into Labels or Inputs.
• No border radius control – only rectangles have custom border radii; other shapes have fixed values.

Tips & Best Practices

Frame Element

The power of containers

The Frame is the most powerful organisational tool in Diterr. It is a container that can hold other elements – text boxes, images, shapes, and even other frames – as children. Think of a Frame as an artboard, a group, or a clipping mask. It provides structure, hierarchy, and control over complex layouts.

• Organise – group related elements together.
• Move as a unit – drag the Frame and all children move together.
• Clip content – hide parts of children that extend beyond bounds.
• Layer efficiently – control stacking order of entire groups.
• Build complex layouts – nest frames within frames.

Example of a Frame containing multiple child elements on the canvas

Frames are essential for building sophisticated templates. They let you group related content, enforce boundaries, and create nested layouts that are easy to manage and manipulate. Whether you are designing a multi‑section flyer, a complex form, or a reusable component, frames give you the organisational power you need.

Default Settings

When you add a new Frame to your canvas, it comes with these defaults:

Key Behaviors

Nesting Elements

The primary purpose of a Frame is to contain other elements. You can nest any element – text boxes, images, shapes, or other frames – inside a Frame.

• Drag and drop – click and drag an element from the canvas onto the Frame. The element becomes a child, and its position becomes relative to the Frame.
• Select Frame + Add – select the Frame, then click any "Add" button from the toolbar. The new element will be placed inside the Frame, centred by default.
• Nesting depth – elements can be nested arbitrarily deep. A Frame can contain a Frame, which contains another Frame, and so on.
• Unnesting – drag an element outside the Frame's bounds to remove it from the Frame.

Moving a Frame

When you drag a Frame, all its children move with it. This lets you reposition entire sections of your design in one gesture.

• The Frame's left and top properties update when dragged.
• Children's positions are relative to the Frame, so they remain in perfect synchrony.
• Use case: A section with a heading, paragraph, image, and button – group them in a Frame and move the entire section at once.

Resizing a Frame

When you resize a Frame, its children are clipped if they extend beyond the Frame's new bounds (due to overflow: hidden).

• Drag the resize handle to adjust width and height.
• Children extending beyond new bounds are hidden.
• Use cases: Masking (circular frame with image inside), controlling overflow, responsive layouts.
• Tip: For overlapping effects or drop shadows, consider a different layout structure.

Locking a Frame

Locking a Frame prevents accidental selection, movement, resizing, or deletion of the Frame and its children.

• Toggle the Lock checkbox in the Properties Panel.
• When locked: the Frame and children cannot be selected or modified; the resize handle is hidden.
• Use cases: Protect finished sections, prevent unwanted edits, temporary protection while working elsewhere.
• Note: Locking does not affect children's data – they remain intact and are restored when unlocked.

Adding Children

• Add new element – select the Frame, click any "Add" button from the toolbar. The new element is placed inside, centred.
• Drag existing element – drag from the canvas or Layers Panel onto the Frame.
• The child's parentId is set to the Frame's ID, and its position becomes relative to the Frame.

Styling a Frame

Frames are highly stylable, allowing you to customise their appearance to match your design.

Background Color

Fills the entire Frame area. Set to any color, including transparent.

• Use cases: Section backgrounds, card effects (white background + shadow), transparent clipping masks.
• How to change: Use the color picker in the Properties Panel.

Border

Defines the edge of the Frame. Customise width, style (solid, dashed, dotted), and color.

• Default: 2px dashed #3b82f6 – clearly identifies Frames.
• Use cases: Visible grouping, guide lines (dashed), design accents.

Border Radius

Rounds the corners of the Frame. Higher values create more pronounced rounding.

• Default: 8px – soft but not extreme.
• Use cases: Card layouts, circular masks (50%), modern design.

Padding

Internal spacing between the Frame's edges and its children. Prevents children from touching the border.

• Default: 16px all around.
• Use cases: Card layouts, form groups, section backgrounds.
• How to change: Adjust Padding X (left/right) and Padding Y (top/bottom) in the Properties Panel.

Image‑Frames

An Image‑Frame is a special variant that also displays a background image. It behaves exactly like a regular Frame – it can contain children, be moved, resized, locked, and styled – but it also shows a persistent image behind its content.

• How to create: Upload a background image via the Flyer upload box in the Layers Panel. The image becomes the background of the Image‑Frame.
• Key differences: No border by default, 0px padding, no children initially.
• Use cases: Full‑page backgrounds, poster designs, branded templates, photo collages.
• Note: Image‑Frames support all regular Frame styling and behaviors.

Use Cases

• Layout Grouping – group related elements (header with logo, nav, CTA) to move as a single unit.
• Card Layouts – create product cards, profile cards, testimonial cards with white background and shadow.
• Form Groups – group form fields and labels for better organisation and styling.
• Masking and Clipping – create circular profile photos by placing an Image inside a Frame with border radius 50%.
• Reusable Components – design a component inside a Frame, then duplicate it for reuse.
• Background Blocks – use a Frame as a coloured background for a section, place content inside.

Tips & Best Practices

Line Guides

Perfect alignment, every time

Line Guides are thin horizontal or vertical lines that help you align elements precisely on the canvas. They are not part of the final design, but they snap other elements to their position, making it easy to create balanced and professional layouts.

• Align – snap elements to the guide when dragging close.
• Drag to reposition – move the guide anywhere on the canvas.
• Resizable – adjust length without changing thickness.
• Invisible in exports – guides appear only in the editor.
• Perfect for spacing – create consistent margins, columns, and rows.

Example of vertical and horizontal line guides on the canvas

Line Guides are essential for creating pixel‑perfect layouts. They serve as visual reference points while you build, and because elements snap to them, you can easily maintain consistent spacing and alignment throughout your template.

Default Settings

When you add a new Line Guide, it comes with these defaults:

Key Behaviors

Adding a Line Guide

You can add a guide from the toolbar by clicking the Guide icon and choosing either Vertical or Horizontal.

• Vertical guide – appears as a thin vertical line spanning the full height of the canvas.
• Horizontal guide – appears as a thin horizontal line spanning the full width of the canvas.
• The guide is centred on the canvas by default.

Moving a Line Guide

Drag the guide to reposition it anywhere on the canvas.

• Drag the line itself, or use the small handle at one end for easier grabbing.
• Vertical guides move only horizontally; horizontal guides move only vertically.
• The guide’s position updates in real time as you drag.

Resizing a Line Guide

You can adjust the length of a guide without changing its thickness.

• Vertical guides – drag the bottom handle to change height (length).
• Horizontal guides – drag the right handle to change width (length).
• The thickness remains fixed, keeping the guide clean and unobtrusive.

Snapping Elements to Guides

When you drag an element near a guide, it will snap to align with the guide’s position.

• Vertical guide – snaps the element’s left edge, centre, or right edge to the guide.
• Horizontal guide – snaps the element’s top edge, middle, or bottom edge to the guide.
• Snapping is strong but can be overridden by moving far enough away.
• Only elements that are not excluded from snapping (e.g., background flyers) will snap.

Styling a Line Guide

You can customise the appearance of a guide in the Properties Panel:

• Orientation – switch between vertical and horizontal.
• Color – change the guide’s colour to stand out or blend in.
• Line Thickness – adjust the thickness in pixels.
• Position – enter a precise position number (or just drag the guide).

Use Cases

• Centre alignment – place a vertical guide at the centre to align key elements.
• Consistent margins – create guides at the edges of your safe area.
• Row & column layouts – use multiple guides to define a grid.
• Baseline alignment – place horizontal guides where text baselines should sit.
• Temporary reference – add a guide, align elements, then delete the guide.

Tips & Best Practices

Working with Multiple Elements

Master your design workflow

As you build increasingly complex templates, you will inevitably find yourself managing multiple elements on the canvas. A typical design might contain dozens of elements – text boxes, images, shapes, and nested frames – all interacting with one another. Understanding how to efficiently select, organise, layer, align, duplicate, and group these elements is essential to maintaining a smooth workflow.

• Z‑Index layering – control depth and visual hierarchy.
• Alignment tools – achieve visual harmony and precision.
• Grouping – temporary, flexible assembly of elements.
• Duplication – rapid reuse and iteration.
• Layers Panel – comprehensive management and organisation.

Example of the Layers Panel showing multiple elements in a hierarchical structure

In this guide, we will explore the core concepts and tools that Diterr provides for working with multiple elements. From the fundamental principle of z‑index layering to the practical convenience of grouping and duplication, you will learn how to take full control of your design's structure and composition.

The Layering System: Z‑Index

Every element on the canvas occupies a position in the third dimension – the depth axis. This is controlled by the z‑index property, which determines the stacking order of elements. Elements with a higher z‑index appear above elements with a lower z‑index. When elements overlap, the one with the higher z‑index is visible on top, while the lower one is partially or fully hidden behind it.

By default, Diterr assigns z‑index values automatically based on the order in which elements are added. The first element you place has the lowest z‑index, and each new element is placed on top of the previous ones.

Three ways to manage z‑index:

• The Layers Panel – click and drag any layer to a new position in the list; this automatically updates its z‑index.
• The Properties Panel – directly edit the numeric z‑index value for precise control.
• Keyboard Shortcuts – use "Bring Forward" and "Send Backward" buttons to move an element one step up or down.

Alignment: Achieving Visual Harmony

Alignment is the foundation of clean, professional design. When elements are properly aligned, they create a sense of order, balance, and cohesion. Diterr provides a set of alignment tools that allow you to align multiple elements in relation to each other or to the canvas as a whole.

To use these tools, select two or more elements by holding Ctrl (or Cmd on Mac) while clicking each element, or by clicking and dragging a selection rectangle over them.

• Distribution tools – evenly space selected elements along a horizontal or vertical axis – perfect for grids, menus, and lists.
• When to use: Group related elements, create symmetry, organise grids.

Grouping: Temporary Containers

While Frames provide permanent, structural grouping, sometimes you need a temporary way to treat a set of elements as a single unit – for example, when you want to move them together, scale them proportionally, or apply a transformation to all of them at once. This is where Grouping comes in.

• How to group: Select elements, press Ctrl+G (or Cmd+G).
• How to ungroup: Select the group, press Ctrl+Shift+G (or Cmd+Shift+G).
• When to use: Temporary rearrangement, proportional scaling, applying transformations, experimental layouts.

Duplication: The Power of Reuse

Duplication allows you to create copies of elements quickly, saving time and ensuring consistency across repeated components.

• Keyboard Shortcut: Alt+Drag(mouse) – creates a duplicate offset from the original.
• Copy and Paste: Ctrl+C / Cmd+C and Ctrl+V / Cmd+V – paste at cursor position.
• Duplicate Button: Available in the Properties Panel.

When you duplicate an element, Diterr creates an exact copy including all properties – content, styling, size, position, and parent relationship. The duplicate is placed at a small offset and automatically selected.

• Use cases: Creating repeated elements, building complex layouts, preserving styling, creating variations.
• Tip: Use Alt+Drag(mouse) for rapid iteration – faster than copy-paste for offsets.

The Layers Panel: Your Command Center

The Layers Panel, located on the left side of the interface, is your primary tool for managing elements. It provides a comprehensive, hierarchical view of every element on the canvas, organised by parent-child relationships.

• Select elements – click any layer to select it on the canvas.
• Reorder elements – drag and drop layers to change z‑index.
• Rename elements – double‑click a layer's name for descriptive labels.
• Lock elements – click the lock icon to prevent accidental changes.
• Delete elements – hover to reveal the trash icon.
• View hierarchy – indentation shows parent-child relationships.

Practical Workflow: Combining the Tools

Here is how these tools work together in a typical workflow:

1. Add the main elements – add a header Frame, hero image, section heading, and body text.
2. Organise with Frames – place the heading and body text into a Frame as a content block.
3. Adjust layering – in the Layers Panel, drag the hero image below the header Frame.
4. Duplicate a section – select the content block Frame, press Alt+Drag(mouse), and drag the duplicate to a new position.
5. Align elements – select both section Frames, use align-top, then distribute-vertical to space them evenly.
6. Lock finished sections – lock both sections to avoid accidental changes.
7. Refine and iterate – rename layers in the Layers Panel for easier navigation.

Summary

Working with multiple elements is where the true power of Diterr shines. The combination of:

• Z‑Index layering – for controlling depth and visual hierarchy.
• Alignment and distribution – for achieving visual harmony and precision.
• Grouping – for temporary, flexible assembly of elements.
• Duplication – for rapid reuse and iteration.
• The Layers Panel – for comprehensive management and organisation.

…gives you complete control over even the most complex templates. By mastering these tools, you can work faster, maintain consistency, and create designs that are both beautiful and easy to manage.

Remember: a well‑organised design is not just about aesthetics – it also makes collaboration, maintenance, and future updates significantly easier.