Skip to main content

Entity Views

At its core, react-ecs is just a way for you to declare the parts of an ECS simulation in the style of React. How you present that simulation is entirely up to you.

In @react-ecs/core we offer a simple DOM oriented view called DOMView.


DOMView is a simple component that you can use as a Facet on your Entities. It's children become that representation of that entity within the DOM:

position: 'absolute',
left: 0,
top: 0,
width: 16,
height: 16,

Using in Queries#

You can treat DOMView like any other Facet. That means you can use it within Queries:

const DOMViewSystem = () => {
const query = useQuery((e) => e.hasAll(DOMView, Position));
return useSystem((dt) => {
query.loop([DOMView, Position], (e, [view, pos]) => {
// sync DOM element's style with entity's Position = `${pos.location.x}px`; = `${pos.location.y}px`;

In this example, we create a System to the entity's DOM position with it's Position facet by manipulating the styles of the DOMView.element.


This technique can be used to integrate @react-ecs/core with basically any alternative renderer for React. Check out @react-ecs/three for an example of this technique applied to ThreeJS