# manycore-maas/painter **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/manycore-maas-painter).** 4,486 stars · 592 forks · JavaScript · Apache-2.0 ## Links - GitHub: https://github.com/manycore-maas/Painter - Homepage: https://painterjs.github.io/ - awesome-repositories: https://awesome-repositories.com/repository/manycore-maas-painter.md ## Description Painter is a declarative rendering system that transforms JSON definitions into styled visual images. It functions as a JSON-to-image rendering engine that converts structured layout data into vector shapes, styled text, and QR codes on a canvas. The system features a dynamic image template engine that utilizes relative coordinate calculations to determine element positions based on the boundaries of other components. It supports the creation of interactive templates where users can drag, scale, and delete elements in real-time, as well as the ability to update specific element properties without triggering a full scene re-render. The library covers a broad range of visual styling and composition capabilities, including the application of gradients, shadows, and rounded corners. It provides a template-based layout engine designed for generating data-driven graphics, such as social media visuals and mini-program images. ## Tags ### Graphics & Multimedia - [JSON-to-Image Compositors](https://awesome-repositories.com/f/graphics-multimedia/json-to-image-compositors.md) — Transforms structured JSON data templates into a sequence of drawing commands to automate visual layout creation. - [Canvas Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/canvas-vector-rendering.md) — Renders vector shapes, styled text, and QR codes onto a canvas using declarative properties. - [Canvas and Vector Graphics](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics.md) — Implements a rendering engine that generates visual output using vector-based primitives on a canvas. - [Vector Graphics Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/vector-rendering-pipelines/vector-graphics-renderers.md) — Renders vector images by efficiently updating graphical elements based on JSON-defined attributes. - [Text Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/text-rendering.md) — Draws shapes, multi-line text, and QR codes onto a canvas with font and style support. ([source](https://cdn.jsdelivr.net/gh/manycore-maas/painter@master/README.md)) - [Image Template Engines](https://awesome-repositories.com/f/graphics-multimedia/image-template-engines.md) — Provides a layout framework for creating customizable image templates with relative positioning and real-time updates. - [Canvas Layout Authoring](https://awesome-repositories.com/f/graphics-multimedia/immersive-interactive-systems/media-interactivity/interactive-media-creation/canvas-layout-authoring.md) — Supports the creation of dynamic canvases where users can drag, scale, and delete elements in real-time. ([source](https://cdn.jsdelivr.net/gh/manycore-maas/painter@master/README.md)) ### Artificial Intelligence & ML - [Template-Driven](https://awesome-repositories.com/f/artificial-intelligence-ml/image-generation/template-driven.md) — Creates visual images from data templates to avoid manually coding every drawing command. ### Data & Databases - [JSON-to-Image Generation](https://awesome-repositories.com/f/data-databases/text-to-json-converters/html-to-text-json-converters/styled-text-to-html-converters/json-to-image-generation.md) — Enables the creation of images by interpreting data-based JSON templates to automate drawing method calls. ([source](https://cdn.jsdelivr.net/gh/manycore-maas/painter@master/README.md)) ### User Interface & Experience - [Coordinate-Based Position Calculators](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators.md) — Calculates element positions by determining spatial coordinates relative to other components on the canvas. - [Floating Element Positioning](https://awesome-repositories.com/f/user-interface-experience/floating-element-positioning.md) — Calculates coordinate offsets for elements relative to the boundaries of other canvas elements. ([source](https://cdn.jsdelivr.net/gh/manycore-maas/painter@master/README.md)) - [Layout Templates](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/configuration-and-integration/custom-template-integrations/asset-presentation-templates/layout-templates.md) — Provides a layout engine that uses predefined visual arrangements to standardize the injection of assets and structural elements. - [Canvas Property Updaters](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/animation-property-accessors/dynamic-property-updaters/canvas-property-updaters.md) — Allows updating specific visual attributes of existing elements without triggering a full scene re-render. - [Dynamic Rendering Updaters](https://awesome-repositories.com/f/user-interface-experience/dynamic-content-updaters/dynamic-rendering-updaters.md) — Modifies specific properties like text or URLs incrementally without requiring a full re-render of the layout. ([source](https://cdn.jsdelivr.net/gh/manycore-maas/painter@master/README.md)) ### Web Development - [JSON-to-Image Rendering](https://awesome-repositories.com/f/web-development/json-apis/json-based-page-schemas/json-to-image-rendering.md) — Converts JSON-defined layouts and data into visual images for social media and digital content. - [Mini Program Template Engines](https://awesome-repositories.com/f/web-development/rendering-templating/mini-program-template-engines.md) — Renders complex graphics and layouts within mini program environments using structured configuration files. ### Networking & Communication - [Dynamic Social Image Generators](https://awesome-repositories.com/f/networking-communication/social-media-integrations/social-media-meta-tag-generators/dynamic-social-image-generators.md) — Generates shareable images for social platforms by injecting user data into predefined visual layouts.