We aim to make Pattaya as minimal as possible.
One aspect of minimalism is reducing cognitive load for developers by introducing fewer new concepts.
Instead of inventing new paradigms, all developer interfaces are built upon familiar concepts.
Everyone understands lines, triangles, bubbles, animated values, and click events.
Because of this, Pattaya’s learning curve is only about 1/10 that of similar libraries.
This approach allows us to focus on practicality, reliability, and performance rather than unnecessary complexity or marketing.
Additionally, Pattaya is designed to avoid excessive external dependencies, maintaining a lightweight nature.
It won’t secretly install hundreds or thousands of dependencies in node_modules,
keeping user projects clean, optimizing bundle size, and enabling faster application builds.
Pattaya is built on primitives—fundamental shapes like triangles, line segments, and arrows,
as well as commonly used UI graphics like bubbles.
Even complex-looking graphics can be created using simple primitives.
By controlling their colors, sizes, and other attributes through JavaScript objects,
the interface remains visually appealing and highly practical without being limited by a library’s built-in features.
This ensures that when issues arise, developers are not left without options.
In contrast, other libraries often require developers to inherit predefined shapes
and configure graphics using dozens of parameters.
For example, in the popular visualization library matplotlib,
you might need 20+ parameters to configure a bar chart,
which is akin to inheriting a bar chart class.
If you need to add a tooltip but matplotlib doesn’t support it,
you must resort to tricky workarounds.
Pattaya constructs graphics through composition rather than inheritance.
Adding lines or bubbles is intuitive—you don’t need to worry about implementation details.
Another advantage is that you don’t need to learn how to tweak behavior
through dozens or even hundreds of parameters, nor do you need to study library-specific APIs.
In fact, Pattaya operates at a lower level than most libraries,
meaning you can build your own visualization or graphics library on top of it.
If you can draw text, rectangles, and arrows, you can draw a bar chart.
Extending such a chart is incredibly simple.
When requirements change, you no longer have to worry about whether a feature is supported—you have full control over your graph.
Pattaya has no built-in state management paradigms.
Developers can freely use plain JavaScript objects to control graphics.
The underlying Depict engine does not enforce state-driven, data-driven, or event-driven patterns.
You are free to choose the approach that best suits your needs.
If you prefer a state-driven approach,
you may encounter challenges with component communication.
Fortunately, Pattaya’s primitive-based design eliminates the need for complex component communication!
If you dislike state management libraries like Redux, MobX, Flux, or Vuex,
then Pattaya’s native JavaScript + render approach is ideal for you.
Unlike other frameworks, you don’t need to worry about:
If you request a re-render, Pattaya schedules an internal render.
If you don’t, nothing changes.
This design, free from black magic or unnecessary paradigms, provides high performance and simplicity with full control.
In Pattaya, everything is independent components do not rely on each other.
Instead, they are composed together at the user level.
This means you can:
You can import just one component from Pattaya.
In fact, it’s only five functions across two files literally —
without pulling in additional dependencies or unnecessary code.
Additionally, Pattaya is purely functional, setting the same props always produces the same stateless components.
There are no hidden states or surprises.
We believe that users are smart enough to control state,
while Pattaya handles the shapes and paths.
Pattaya strives to be the most visually appealing graphics library by default.