Before you start building a custom renderer, it is helpful to understand the different components that make up a renderer, as well as how a block gets broken up into rows and elements.
A renderer is built up of several different components. Each component has a unique job to maximize code reuse and extensibility.
The renderer is a factory class that bundles all of the other components together.
The constant provider is a collection of numbers, and shapes used by all of the other components, as well as built-in fields.
The path object contains the SVG elements that live in the dom and make up the block.
A measurable is a rectangle representing a region of a block. Measurables are what the render info uses to define the layout of the block.
Some measurables also include extra data (such as the visual thing they are representing), or helper methods that the render info can use to figure out how to lay out the block.
Different renderers may create custom measurables to change these data or helper methods.
A row spacer is an empty vertical space that goes between two rows.
An element spacer is an empty space that goes between elements in a row.