php-wasm
PHP in WebAssembly, npm not required.
find php-wasm on npm | github | unpkg | reddit | discord
<script type = "text/php"> support.src on above.Include the php-tags.js script from a CDN:
<script async type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/php-wasm/php-tags.jsdelivr.mjs"></script>
And run some PHP right in the page!
<script type = "text/php" data-stdout = "#output">
<?php phpinfo();
</script>
<div id = "output"></div>
Inline php can use standard input, output and error with data- attributes. Just set the value of the attribute to a selector that will match that tag.
<script async type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/php-wasm/php-tags.jsdelivr.mjs"></script>
<script id = "input" type = "text/plain">Hello, world!</script>
<script type = "text/php" data-stdin = "#input" data-stdout = "#output" data-stderr = "#error">
<?php echo file_get_contents('php://stdin');
</script>
<div id = "output"></div>
<div id = "error"></div>
The src attribute can be used on <script type = "text/php"> tags, as well as their input elements. For example:
<html>
<head>
<script async type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/php-wasm/php-tags.jsdelivr.mjs"></script>
<script id = "input" src = "/test-input.json" type = "text/json"></script>
<script type = "text/php" src = "/test.php" data-stdin = "#input" data-stdout = "#output" data-stderr = "#error"></script>
</head>
<body>
<div id = "output"></div>
<div id = "error"></div>
</body>
</html>
<script async type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/php-wasm/php-tags.jsdelivr.mjs"></script>
<script async type = "text/javascript" src = "https://www.unpkg.com/php-wasm/php-tags.unpkg.mjs"></script>
Install with npm:
$ npm install php-wasm
Include the module in your preferred format:
const { PhpWeb } = require('php-wasm/PhpWeb.js');
const php = new PhpWeb;
import { PhpWeb } from 'php-wasm/PhpWeb.mjs';
const php = new PhpWeb;
Note: This does not require npm.
const { PhpWeb } = await import('https://cdn.jsdelivr.net/npm/php-wasm/PhpWeb.mjs');
const php = new PhpWeb;
const { PhpWeb } = await import('https://www.unpkg.com/php-wasm/php-wasm/PhpWeb.mjs');
const php = new PhpWeb;
You won't need to use this if you build in-place or use a CDN.
The php-wasm package comes with pre-built binaries out of the box so you can get started quickly.
You'll need to add the following postinstall script entry to your package.json to ensure the static assets are available to your web application. Make sure to replace public/ with the path to your public document root if necessary.
{
"scripts": {
"postinstall": [
"cp node_modules/php-wasm/php-web.* public/"
]
},
}
If you're using a more advanced bundler, use the vendor's documentation to learn how to move the files matching the following pattern to your public directory:
./node_modules/php-wasm/php-web.*
Create a PHP instance:
const { PhpWeb } = await import('https://cdn.jsdelivr.net/npm/php-wasm/PhpWeb.mjs');
const php = new PhpWeb;
Add your output listeners:
// Listen to STDOUT
php.addEventListener('output', (event) => {
console.log(event.detail);
});
// Listen to STDERR
php.addEventListener('error', (event) => {
console.log(event.detail);
});
Provide some input data on STDIN if you need to:
php.inputString('This is a string of data provided on STDIN.');
Be sure to wait until your WASM is fully loaded, then run some PHP:
php.addEventListener('ready', () => {
php.run('<?php echo "Hello, world!";');
});
Get the result code of your script with then():
php.addEventListener('ready', () => {
php.run('<?php echo "Hello, world!";').then(retVal => {
// retVal contains the return code.
});
});
To use IDBFS in PhpWeb, pass a persist object with a mountPath key.
mountPath will be used as the path to the persistent directory within the PHP environment.
const { PhpWeb } = await import('https://cdn.jsdelivr.net/npm/php-wasm/PhpWeb.mjs');
const php = new PhpWeb;
let php = new PhpWeb({persist: {mountPath: '/persist'}});
To use NodeFS in PhpWeb, pass a persist object with mountPath & localPath keys.
localPath will be used as the path to the HOST directory to expose to PHP.
mountPath will be used as the path to the persistent directory within the PHP environment.
const { PhpNode } = await import('https://cdn.jsdelivr.net/npm/php-wasm/PhpNode.mjs');
const php = new PhpNode;
let php = new PhpNode({persist: {mountPath: '/persist', localPath: '~/your-files'}});
To use the the in-place builder, first install php-wasm globally:
Requires docker, docker-compose & make.
$ npm install -g php-wasm
Create the build environment (can be run from anywhere):
$ php-wasm image
Optionally clean up files from a previous build:
$ php-wasm clean
Then navigate to the directory you want the files to be built in, and run php-wasm build
$ cd ~/my-project
$ php-wasm build
# php-wasm build web
# "web" is the default here
$ cd ~/my-project
$ php-wasm build node
Build ESM modules with:
$ php-wasm build web mjs
$ php-wasm build node mjs
This will build the following files in the current directory (or in PHP_DIST_DIR, see below for more info.)
# php-wasm build web
PhpWeb.js # ⭐ require this module in your javascript if you want to use PHP in JS.
php-web.js # internal interface between WASM and javscript
php-web.js.wasm # binary php-wasm
# php-wasm build node
PhpNode.js # ⭐ require this module in your scripts to use PHP in JS in node.
php-node.js # internal interface between WASM and javscript
php-node.js.wasm # binary php-wasm
# php-wasm build web mjs
PhpWeb.mjs # ⭐ import this module in your javascript if you want to use PHP in JS.
php-tags.local.mjs # ✨ include this with a script tag in your HTML if you want to use inline PHP
php-web.mjs # internal interface between WASM and javscript
php-web.mjs.wasm # Binary php-wasm
# php-wasm build node mjs
PhpNode.mjs # ⭐ import this module in your scripts to use PHP in JS in node.
php-node.mjs # internal interface between WASM and javscript
php-node.mjs.wasm # binary php-wasm
PhpBase.js # All cjs builds depend on this file.
PhpBase.mjs # All mjs builds depend on this file.
You can also create a .php-wasm-rc file in this directory to customize the build.
# Build to a directory other than the current one (absolute path)
PHP_DIST_DIR=~/my-project/public
# Space separated list of files/directories (absolute paths)
# to be included under the /preload directory in the final build.
PRELOAD_ASSETS=~/my-project/php-scripts ~/other-dir/example.php
# Memory to start the instance with, before growth
INITIAL_MEMORY=2048MB
# Build with assertions enabled
ASSERTIONS=0
# Select the optimization level
OPTIMIZATION=3
# Build with libXML
WITH_LIBXML=1
# Build with Tidy
WITH_TIDY=1
# Build with Iconv
WITH_ICONV=1
# Build with SQLite
WITH_SQLITE=1
# Build with VRZNO
WITH_VRZNO=1
Use the PRELOAD_ASSETS key in your .php-wasm-rc file to define a list of files and directories to include by default.
These files will be available under /preload in the final package.
So long as php.refresh() is not called from Javascript, the instance will maintain its own persistent memory.
<?php
// Run this over and over again...
print ++$x;
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
FAQs
Run PHP right in the browser or anywhere else JS can run.
We found that php-wasm demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.