#Introduction

Website：https://makepad.nl/

Github Repo：https://github.com/makepad/makepad

🚧 Currently the more active branch is rik, it is recommended that you check based on the rik branch to get the latest makepad support.

Makepad is an in-development shader based live designable OSS UI-Framework

#Makepad Book Introduction

The Book of Makepad is aimed to Makepad application developers and contributors. It systematically introduces various aspects of the Rust cross-platform Makepad UI framework.

#Makepad Introduction

Makepad is an OSS cross-platform UI framework written in Rust, accompanied by Makepad Studio, a powerful authoring application. This combination offers a streamlined approach to UI development, enabling developers and designers to create modern, high-performance applications with ease.

Makepad is built with and for Rust, a modern, safe programming language. It operates natively and on the web, supporting all major platforms including Windows, Linux, macOS, iOS, and Android.

Makepad is known for its remarkably fast compilation speed which ensures a productive and interruption-free development experience.

Makepad UIs are shader based. This ensures high performance, making it suitable for building complex applications such as those similar to Photoshop and also for 2.5D UIs like one finds in VR/AR applications.

The framework simplifies styling compared to HTML by using an immediate mode and a simple DSL, eliminating the need for a complex DOM or CSS. It also provides direct access to the GPU, offering more control and flexibility while avoiding issues related to garbage collection, ensuring smoother performance.

One of Makepad's most stand out features is live styling, which allows immediate reflection of UI changes in the code and vice versa, without the need for recompilation or restarts. This feature significantly narrows the gap between developers and designers, enhancing overall productivity. Makepad Studio brings it all together with its own IDE and Figma-like visual tooling, allowing designers to intuitively work directly on the actual product.

Another key component is Stitch, an experimental WebAssembly (WASM) interpreter built in Rust. Renowned for its exceptional speed and lightweight performance, Stitch is currently regarded as the fastest WASM interpreter available. [tbd: usage within Makepad. Superapps, extension system, allows plugging in building blocks without sacrificing performance …]

The demo showcased in the video below demonstrates this vision.

You can visit makepad-simple to run this demo locally.

Online Demo (outdated):https://makepad.dev/

This online demo for makepad studio is not up to date, you can download the newest version from here.

As seen in the video: the code, 3D tree, and design icons can all be linked in real-time, and the video ends with an impressive code collapse animation.

To achieve this vision, Makepad needs to provide two main components:

• Makepad Framework
• Makepad Studio

#Advantages

#Performance Matters

• Software should be a joy to use

  When developers focus on their expertise, quality improves. And Makepad's design-editor will let designers themselves bring UIs to the next level.

• App downloads should be fast

  Filesize matters for products that also run on the web. Makepad projects are tiny.

• Work should be done only once

  Writing cross platform specific code is time consuming. Makepad projects share identical code across web and native.

#Better Workflows Lead to Better Products

• Mockups should be a thing of the past

  When developers focus on their expertise, quality improves. And Makepad's design-editor will let designers themselves bring UIs to the next level.

• Workflows should be streamlined

  The thrill of actualizing a fantastic idea deserves safeguarding. Makepad's roadblock-free development experience safeguards motivation.

• Development should be interruption-free

  Rapid compile times preserve mental flow. Makepad proves that Rust can compile stunningly fast — and its live design system is even instantaneous.

#Advantages and Disadvantages of Makepad's Technology Stack

There is no such thing as a perfect tech stack in the world; everything is just a trade-off. Makepad has also developed under these constant trade-offs. It has its own strengths and weaknesses.

#Rust

• Advantages

  Rust offers many advantages, such as high performance, safety, a strong type system, predictable runtime, a robust package manager, seamless ABI compatibility with C, and a single compiler maintained officially (no need to consider multiple compilers like in C/C++), These are reasons for choosing Rust.

• Disadvantages

  However, developing applications in Rust is relatively more challenging compared to languages with garbage collection like C#, Java, Kotlin, or JavaScript, and the developer user base is relatively smaller. Additionally, the ecosystem for UI in Rust is still not mature, which poses challenges for adopting Rust.

#Use Shaders to Render UI Styles

• Advantages

  Makepad uses shaders to render UI styles due to their high performance and powerful functionality.

• Disadvantages

  • However, there are significant drawbacks: high power consumption, especially when the screen area is large.
  • The shader language also adds a learning burden, and shader compilation times can be slow.

#Hybrid Immediate Mode

• Advantages

  • Update the UI when data changes is very simple from a coding perspective.
  • Layouts are also simpler.

• Disadvantages

  • It's a different paradigm than Swfit/ Flutter / React and requires a learning cost.
  • The layout model is also unlike Flexbox or Flutter's model, but it is extensible.

#Render Stack

• Advantages

  Utilizes the GPU to accelerate the UI, making it easy to integrate design capabilities into the system.

• Disadvantages

  The downside is that font rendering needs to be redone, requiring loading of TTF files, and it increases the package size for web/mobile devices. It is difficult to integrate with systems that only provide high-level rendering structures (such as HTML or native UI toolkits) for native functionality and accessibility (an advantage of React Native). Bridging more and more native APIs to Rust/Makepad is a significant task.