Design Validation

You can use Store API to inspect each element's properties on the page, enabling thorough design checks and validation to custom standards.
You may define your own custom logic of validation and display in a way, that fits better your use case.

Why Use Design Validation?

Here are several common use cases where design validation can enhance the design workflow and final output:

1. Compliance with Brand Guidelines
   Ensure that elements meet brand standards (e.g., font, color, size) by validating attributes against predefined values. For example, you can check if all text elements use a specific font or color palette required for brand consistency.

2. Image Quality Control
   Validate image resolutions to confirm they meet print or screen quality standards. For instance, by checking the resolution property, you can avoid low-quality images being used in high-resolution exports.

3. Layout Checks for Export
   Review layout constraints to ensure all elements are within the visible canvas area and correctly aligned. This prevents issues where elements appear cut off or misplaced in the final export.

4. Content Accessibility
   Check text elements for minimum font size, contrast, and positioning to ensure readability and accessibility compliance. This is especially helpful for designs that will be displayed on smaller screens or for an audience with specific visual needs.

Getting Started with the Store API

The Store API gives you direct access to every element's properties on the canvas, making it easy to build custom validation checks for your specific needs. To access and validate each element, use:

const errors = [];
// let's use "find" method to quickly loop over all elements.
store.find((item) => {
  // Perform validation checks on element properties
  if (item.type === 'text') {
    if (item.text.length > 300) {
      errors.push({
        message: 'Too long text',
        elementId: item.id
      });
    }
  }
});
// then do something with errors in UI...

With Polotno’s Store API, you gain powerful control over your design quality, ensuring that each element aligns with your project standards before exporting or publishing.

Demo

In the demo there is a simple validation for position, font size and image quality. The toolbar is used to display validation status. Click on issue to select related element on the canvas.