Quick Start

Create Next2D apps with no build configuration.

npx create-next2d-app app-name
cd app-name
npm start

Directory Configuration

├── src
│   ├── index.js
│   ├── App.js
│   ├── Packages.js // It will be generated automatically.
│   │
│   ├── component
│   │   └── default empty
│   │
│   ├── config
│   │   ├── config.json  // Configuration files for each environment.
│   │   ├── routing.json // Request settings before loading the view.
│   │   ├── stage.json   // Display(Stage) area setting. 
│   │   └── Config.js    // It will be generated automatically.
│   │
│   ├── content // Symbolic access to JSON created with NoCode Tool
│   │   ├── TopContent.js
│   │   └── HomeContent.js
│   │
│   ├── image
│   │   └── default empty
│   │
│   ├── model // business logic
│   │   ├── api
│   │   │   └── HomeText.js
│   │   └── callback
│   │       └── Background.js
│   │
│   └── view // Per-page View, ViewModel files.
│       ├── top
│       │   ├── TopView.js
│       │   └── TopViewModel.js
│       └── home
│           ├── HomeView.js
│           └── HomeViewModel.js
└── __tests__ // Unit Test directory
    └── model
        └── default empty



  • Starts the development server.
npm start
  • Generate the necessary View and ViewModel classes from the routing JSON file.
npm run generate
  • Write out the production app for the specified environment variables.
npm run build -- --env="prd"
  • Starts the test runner.
npm test

Configuration JSON


widthnumber240This is the setting for the width of the display area.
heightnumber240This is the setting for the height of the display area.
fpsnumber12The number of times to draw per second.
Option settings
basestringemptyWhen acquiring JSON by relative path, the URL set here will be applied as the root. For absolute paths, the URL set here will not be applied.
fullScreenbooleanfalseIt will be drawn on the entire screen beyond the width and height set in the Stage class.
tagIdstringnullWhen an ID is specified, drawing will be performed within the element with the specified ID.
bgColorarraynullThe [R,G,B,A] array of background colors can be specified from 0 to 255. false is colorless and transparent.


| Different variable values can be set for each environment. Values set with `all` are available in all environments.

spabooleantrueAs a Single Page Application, the scene can be controlled by URL.
loading.callbackstringLoadingSets whether or not to display the loading screen until the preparation for screen transition is complete. Call the start and end functions of the class set as callback.
gotoView.callbackstring or array["callback.Background"]You can specify the class to call back after the `gotoView` function finishes.


The top properties that can be set for routing are alphanumeric characters, slashes, hyphens, and underscores. Access the View class in CamelCase using the slash, hyphen, and underscore as keys.


In the case of the sample below, access is enabled at `` and the context is set to `QuestListView.js`.

  "quest/list": {
    "requests": []

Second level property settings

privatebooleanfalseThis is used to control direct access in SPA mode; if set to true and accessed directly, the View set in redirect will be loaded.
redirectstringemptyWhen private is true, the page set here will be loaded. If it is not set, TopView will be loaded.
requestsarraynullSend a request to the specified location before accessing the View. The information received will be set in next2d.fw.response with name as the key.

Properties that can be set in the requests property.

typestringcontentThe following fixed values are available for this property. `json`, `content`, `image` and `custom`
pathstringemptyGet the value of the string enclosed in {{***}} from config.json. e.g. {{ api.endPoint }}path/to/api
namestringemptyWhen the name is set, the data retrieved with the name as the key will be set in the Response Map.
cachebooleanfalseCaches the retrieved data using the value set in name as a key.
callbackstring or arraynullYou can specify the class to call back after the request is completed. The value will be set to the first argument of the contractor of the specified class and will be taken over.
classstringemptyYou can specify the class that will execute the request. (it will only be invoked when type is custom)
accessstringpublicAllows you to specify access to the function that will perform the request. You can specify `public` or `static`. (Only invoked when type is custom)
methodstringemptyYou can specify a function to execute the request. (only fired when type is custom)