A 3D game engine designed for vibe coding. Declarative HTML-like syntax, ECS architecture, and game-ready features including physics, rendering, and player controls out of the box.
Vibe coding games works at first, but falls apart as the project grows.
npm create vibegame@latest my-game
cd my-game
bun devThis scaffolds a complete project with llms.txt system prompt for AI-assisted development.
bun install vibegame<world canvas="#game-canvas" sky="#87ceeb">
<!-- Ground -->
<static-part pos="0 -0.5 0" shape="box" size="20 1 20" color="#90ee90"></static-part>
<!-- Ball -->
<dynamic-part pos="-2 4 -3" shape="sphere" size="1" color="#ff4500"></dynamic-part>
</world>
<canvas id="game-canvas"></canvas>
<script type="module">
import * as GAME from 'vibegame';
GAME.run();
</script>System Prompt: Include llms.txt in your AI system prompt for comprehensive VibeGame documentation.
Comprehensive Documentation: Use Context7 to fetch detailed documentation:
// Use mcp__context7__resolve-library-id to find "vibegame"
// Then use mcp__context7__get-library-docs for full documentationContext Workflow: Use Shallot to manage context across conversations:
- Use
/peelat conversation start to load necessary context - Use
/nourishat conversation end to update context
Live bevy, uses an Entity Component System architecture with Plugins:
- Components: Pure data structures without behavior
- Systems: Logic separated from data
- Plugins: Self-contained modules that bundle related functionality
Entities and components defined declaratively in HTML:
<world canvas="#game-canvas" sky="#87ceeb">
<static-part pos="0 -0.5 0" shape="box" size="20 1 20"></static-part>
</world>Game-ready features out of the box:
- Controllable character
- Physics simulation
- Camera controls
- Rendering pipeline
- Input handling
All entities are defined within the <world> tag:
<world canvas="#game-canvas" sky="#87ceeb">
<!-- All entities and components here -->
</world>Entities and components can be defined with a CSS-like syntax:
<world canvas="#game-canvas" sky="#87ceeb">
<entity
transform
body="type: 1; pos: 0 -0.5 0"
renderer="shape: box; size: 20 1 20; color: 0x90ee90"
collider="shape: box; size: 20 1 20"
></entity>
</world>or, with CSS-style shorthand expansion:
<world canvas="#game-canvas" sky="#87ceeb">
<entity
transform
renderer
collider
pos="0 -0.5 0"
body="type: 1"
shape="box"
size="20 1 20"
color="#90ee90"
></entity>
</world>or, with recipes (entity-component bundles):
<world canvas="#game-canvas" sky="#87ceeb">
<static-part pos="0 -0.5 0" shape="box" size="20 1 20" color="#90ee90"></static-part>
</world>Register custom systems and components to handle arbitrary game logic:
<world canvas="#game-canvas" sky="#87ceeb">
<static-part pos="0 -0.5 0" shape="box" size="20 1 20" color="#90ee90"></static-part>
<!-- Entity with custom component -->
<entity my-component="10"></entity>
</world>
<script type="module">
import * as GAME from 'vibegame';
const MyComponent = GAME.defineComponent({
value: GAME.Types.f32,
});
const query = GAME.defineQuery([MyComponent]);
const MySystem: GAME.System = {
update: (state: GAME.State): void => {
const entities: number[] = query(state.world);
for (const entity of entities) {
console.log("my-component value for entity", entity, "is", MyComponent.value[entity]);
MyComponent.value[entity] += 1;
}
},
};
GAME.withComponent('my-component', MyComponent)
.withSystem(MySystem)
.run();
</script>When registered, the custom component MyComponent will be automatically parsed from HTML with value 10. The custom system MySystem will be automatically run every frame, which will query for every entity with my-component and increment its value by 1.
# Install dependencies
bun install
# Run example (hello-world)
bun run example
# Build library (fast, library only)
bun run build
# Build for release (includes docs & CDN)
bun run build:release
# Run tests
bun test
