Getting Started
Learn how to install, set up, and create your first AsaJS project.
System requirements
Before you get started, make sure you have:
Installation
Install the core package using npm:
npm install asajs
Tip: It's recommended to use a src
directory to organize your project.
In your package.json
, you can optionally add these scripts for development and production builds:
{
"type": "module",
"scripts": {
"dev": "node --watch src/app.js",
"build": "node src/app.js"
}
}
Project Structure
Create a src
directory and a main entry file inside it:
mkdir src
touch src/app.js
Sample Usage (src/app.js)
import { Anchor, BindingName, UI, Vanilla } from "asajs"
// Game start screen content
const vanillaStartScreenContent = Vanilla.start.startScreenContent()
// A custom start screen
const ourStartScreenContent = UI.panel({ size: "100%" }).addChild(vanillaStartScreenContent)
// Toggle for hide start screen
const ourToggle = UI.extend(Vanilla.commonToggles.lightTextToggle(), {
w: 84,
h: 28,
$button_text: "Hide Screen",
$toggle_name: "hide_start_screen",
$toggle_view_binding_name: "hide_start_screen_state",
})
// Add toggle to start screen content
ourStartScreenContent.addChild(ourToggle, {
anchor: Anchor.TopLeft,
x: 5,
y: 5,
})
vanillaStartScreenContent.override.addBindings([
{
binding_name: BindingName.ScreenNeedsRebuild,
binding_name_override: "#bind_0",
},
{
source_control_name: "hide_start_screen_state",
source_property_name: "#toggle_state",
target_property_name: "#bind_1",
},
{
source_property_name: "[!#bind_0 && !#bind_1]",
target_property_name: "#visible",
},
])
// Modify start screen content
Vanilla.start.startScreen({
$screen_content: ourStartScreenContent.getPath(),
})
Tip: You can find the Bedrock Samples repository for vanilla Minecraft UI paths.
Building the Project
To compile the DSL and generate a resource pack:
npm run build
For live rebuilding during development:
npm run dev
Output
The build process generates a full JsonUI-compatible resource pack, stored in:
.build
- compiled output
.minecraft
- symbolic link for automatic installation (if configured)
Next: Defining Elements
Defining Elements: Learn how to define and structure elements using AsaJS.
Contributors