Skip to content

Getting Started with Siv3D Programming for the Web

An unofficial version of Siv3D that runs in web browsers is available. As the web version has some limitations and special considerations, it is targeted at intermediate to advanced users who are already familiar with Siv3D. If you run into any issues, please ask for help in the #web channel on the Siv3D Discord server.

1. Development Environment Setup

1.1 Common Preparation

  • Please refer to OpenSiv3D for Web (in Japanese).
    • For Visual Studio 2022, you will need to download and install a total of three software packages.

Getting the Latest Version from Community Contributors

The official link above provides an SDK equivalent to Siv3D v0.6.6. However, community contributors have developed and provided an SDK with improved compatibility with newer versions of Siv3D. When following the OpenSiv3D for Web installation instructions , please replace the Siv3D SDK with the one available at the link below.

2. Building Web Projects

  • Building a web version of a Siv3D project takes significantly longer than building a standard desktop application. It is recommended to conduct most of your development using the standard Siv3D for desktop and only build for the web when necessary for testing.
  • In Visual Studio, you may see red underlines and error messages in the editor even when the code is correct.
  • In Visual Studio, you can build and run with the "▶" button. However, if Google Chrome is not installed, the application may not launch automatically after the build completes.
  • The generated .html file cannot be run by double-clicking it in your local file system. You must either launch it through the debugger or use a local web server, such as the Live Preview extension for VS Code.

3. Publishing Your Program

  • Upload all four files (.html, .js, .data, .wasm) generated by the build to a web server.
    • Free web hosting services like GitHub Pages are a convenient option.
  • You can change the title of the web page by manually editing the <title> tag in the .html file.
  • By default, the web build bundles the entire contents of the resource/engine/ and example/ directories into the final output. This can result in a large total file size, often tens of megabytes, even for a Release build. Publishing these large files can lead to long download times for your users. When you are ready to publish your application, be sure to exclude unnecessary bundled files (see Tutorial 60. Distributing Your Application).
  • You can further reduce the size of the web version's output files by removing unused libraries from the "Additional Dependencies" in the Emscripten linker settings (e.g., Siv3DScript, opencv_objdetect, opencv_photo, turbojpeg, gif, webp, opusfile, opus, tiff).
  • When optimized, the total file size can be reduced to a few megabytes or less.

Configuration Examples in Visual Studio

Specifying Bundled Folders

  • $(ProjectDir)\folder_name@/folder_name
    • For example, to bundle an asset folder, specify $(ProjectDir)\asset@/asset.
    • To exclude the example folder, remove the $(ProjectDir)\example@/example entry.

Removing Dependency Files

  • Remove any libraries that your program does not use from this list.

4. Web Version Support

Although the web version of Siv3D is unofficial, questions and reports are welcome in the #web channel on the Siv3D Discord server.