METAYOTA C++ engine

Please stay tuned for further announcement and demo of the METAYOTA C++ engine! The product is in alpha development.

The C++ engine is a rendering engine developed by METAYOTA LLC to paint digital graphics.

The engine is optimized to be used to create graphics for paper-ink displays. These apps could be used in industry or for paper-ink tablets. The software is able to work in lower-power devices like 1 watt computers!

  • Painting black and white
  • Painting on three color screens like red or blue and black and white
  • Painting 16-scale white/gray/black

The software is also able to create color graphics used for document generation as pixel-graphics (no PDF support), internet graphics generation, user interface painting for Linux desktop applications, user interface painting for Windows, user interface painting for macOS!

The graphics painting for applications is accelerated by OpenGL.

A fast software renderer is also included.


  • distance: pixelSet the distance for all the distance properties top, right, bottom, left in pixel!
  • distance-top: pixelThe distance to the next upper component!
  • distance-left: pixelThe distance to the component left!
  • distance-right: pixelThe distance to the component right!
  • distance-bottom: pixelThe distance to the component botton!
  • space: pixelSets the space for all the space properties top, left, right, bottom!
  • space-top: pixelThe upper space between the background and the content!
  • space-left: pixelThe left space between the background and the content!
  • space-right: pixelThe right space between the background and the content!
  • space-bottom: pixelThe lower space between the background and the content!
  • backgroud-color: colorThe color of the background of the component (with transparency-level)
  • text-color: colorThe color of the text
  • text: stringThe text itself
  • flow-type: vertical | horizontalShould the child components flow horizontally or vertically
  • width-type: percent | pixels | percent_remaining | content_sized
  • height-type: percent | pixels | percent_remaining | content_sized
  • vertical-align: top | middle | bottomShould the content be painted on the top of the current line, in the middle of the current line, or on the bottom of the current line
  • linkThe link to the design that appears when the user clicks on this component!

Additonal Features

  • DesignerThe designer is a software to design your user-interfaces, graphics, etc!
  • SpeedThe software is really fast! The application starts in a few milliseconds!

Rending model

The rending model is based on boxes, which are encapsulated in a tree model. The distance model is a renderer, which uses most of the time to calculate the distance between boxes the MAX-function.

When rendering designs, the MAX-function ensures that only intended distances by the designer will appear in the final screen design. This saves much CSS-code, because to define distances between visible boxes is more natural than the CSS Box Model where the definition of distances with margin and padding is not possible.

The combination of the C++-Engine with the standardised software production would allow C++ developers to create their own visual 2D or 3D-components based on C++ with an easy-to-understand Rendering Engine, optimized for 2D rendering.

Why not use HTML and the CSS-Box Model?

In the CSS Box Model the margin and padding used define numbers which define distances to points with no meaning. When two objects have natural distances, the nature would use this natural distance to a point with meaning and not an artificial point. When a graphic looks good (e.g. an icon) with a certain area around itself, it means that this area must be free from other boxes with this number and not this number + a maybe unkown number. And the uncertainty is because the designers do not know while define the component, what other components are used or introduced.

When a box has a natural distance around itself where no other boxes are placed, it means normally the distance to a visually remarkable point. Designers measure like this and wish that the given numbers are not added, because adding numbers (margin + padding, or margin+margin, or any combination) will result in more measurable distances and according to design theory, a harmonious design contains more equal mesuarable distances. The design theory is also very good visible in the Google Material Design, where distances of e.g. 2px, 4px, 8px, 16px, 32px, 64px are used to create a harmonious user interface. When implementing this in HTML, the using of margin and padding with these numbers would result in all combinations of measurable distances like (16px + 2px = 18px) which are unintended distances.

The CSS Box Model rendering needs too much adjustsments for defining margin and padding to fix the issue with the natural distance. Much of todays CSS code is just fixing this issue and much of the design problems on websites base on this issue.

Why not use SCSS

SCSS and similar technologies create large CSS selectors! They are slow to parse, hard to overwrite, hard to read!

Why not use CSS

CSS slows down the rendering! On a fast computer or smart phone the CSS parsing is done within a millisecond when you cleaned up your CSS correctly!

The current implementation of METAYOTA does not contain any CSS capabilities for performance reasons. But it is possible to integrate it easily!

Why not use HTML

There are no good design tools for HTML, because it was never created to be integrated into a designer!

The idea of a designer application is to have a visual representation of the definitions and numbers behind the design.

When a HTML designer would for example displays a ruler for the margin the ruler would just point to nowhere! Because where the ruler ends, the other component does not start. Just the outer box. And this prevents application developers from creating real designers for HTML.

The word margin and padding has have no meaning for designers. Neither the word, nor the definition of the box model. It is not explainable to designers, because it makes no sense in design theory.

The proof that this model is better is that for example to implement a Material Design like layout with a set of distances for components, it would require much more HTML CSS code than METAYOTA CSS code / approximately 3 times more.

Also entire work of the designers has to be replicated into HTML while with METAYOTA the designers can directly work in the METAYOTA editor with the designer.

Please read about the "Collapsible Margins" recommandation and imagine that the margins and paddings would both and always collapse. And the default also for text rendering is bad, because it has no visual meaning.

HTML is not designed to be integrated into a designer like Sketch, because the rulers for margin-padding would mostly point to nowhere. To synchronize distances it is much easier to have fewer distances.

Comfort zone design theory

Two people have a comfort zone around themselves. One guy has 2 meter and the other 1 meter comfort zone. The resulting comfort zone would be 2 meter. MATH.MAX(COMFORT_ZONE_PERSON_1, COMFORT_ZONE_PERSON_2)

Two cars have a safe distance to the next car, depending on their speed. The numbers are again not added. Because the objects have their own calculations. They do not know about the calulations of others. A car driver which drives with 50 km per hour estimates its own breaking speed, etc. and also the possible behavior of other cars. 50 km per hour means that he need 100 meters to stop the car. The car passes by a runner does not know anything about the comfort zone of the runner. It just has its own calculations.


The idea is to keep the lines of code for the software under 10.000 lines, with an easy to implement interface which can render text, colored boxes, images, etc. (for example to call SDL/OpenGL/Vulkan/Software-Renderer API's to use the graphics-card for rendering or to keep the library easy to check).

The idea is to create a complete ecosystem for building low-energy-use applications, for products which do not have much RAM, hard-drive space, processor power, etc. Like colored paper ink display (3-color, grayscale, more colors), which do not need a fast processor, because the refresh rate of the screen is much lower than on other displays. This means that the time for painting a frame is around 1 second.

There is unfortunately (not yet) a standard for 2D rendering in C++, so the renderer will use SDL to render the graphics.

To create user interfaces for industry machines, low-power-products, etc. normally requires programming skills and much time. The designer application, like the Resource Manger, has the environment to build JSON-files with a visual editor.

When you can convert a spoken sentence into a design like "The distance from the title to the following element is minimum 5px". You find out, that with the CSS Box Model it is hard to build natural language sentences.

"The flash icon has minimum a 10 pixel distance (to the title)"

The application model is already a tree structure (e. g. Angular) and to build a separate design tree structure is not necessary, but the design model is able to attach content visually to other components instead of the place them in the tree structure with JavaScript-DOM-manipulation.

The idea is to use this for the following: Message-boxes, navigation, error messages, ...


The best CSS is always if you can convert the code into natural language sentences which make sense.

METAYOTA renderer

.documentation { background: red; space: 20px; } .title { distance: 10px; } .subtitle { distance: 10px; }

Same code with HTML

.documentation { background: red; padding: 20px; } .title { margin: 10px; margin-left: 0px; } .documentation .title:first-child { margin-top: 0px; } .documentation .sub-title:first-child { margin-top: 0px; } .subtitle { margin: 10px; margin-left: 0px; }

This is the HTML code

<div class="documentation"> <div class="title">C++</div> <div class="subtitle">A C++-example</div> <div class="text">Just a test</div> </div>

margin and padding

The words "margin" and "padding" are not a natural language constructs, because the definition has no meaning to technical people, non-technical people and not even to designers.

It would be much easier to say "the documentation tag is a red line around title, subtitle and text with a distance of 10 pixel to the elements within."

When CSS is not convertable into natural language which is understandable by designers it is not a design language which results in good designs. Because the designers know the important numbers and measures / lines to measure the correctness of the layout and these numbers are not found very often in CSS.


The product is at the moment not published! But there is a demo coming soon!

If you are interested in using the renderer for your applications, please contact us!