PHP (Wasm)

PHP in Browser, powered by WebAssembly (using php-wasm).

php-wasm runs PHP in the browser using WebAssembly. This matches the behavior of the official PHP interpreter and allows using PHP's standard library. However, it requires relatively large download and has limited capabilities for client-side DOM manipulation.

Note

If you need a lighter-weight interpreter with more capable client-side DOM manipulation in PHP and do not need to use PHP's standard library, you may want to use the PHP interpreter written in JavaScript.

Usage

Standard Library

The PHP standard library is supported.

<?php
phpinfo();

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "script": {
      "language": "php-wasm",
      "content": "<?php\n\nphpinfo();"
    },
    "activeEditor": "script",
    "mode": "result"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "script": {
      "language": "php-wasm",
      "content": "<?php\n\nphpinfo();"
    },
    "activeEditor": "script",
    "mode": "result"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "script": {
      "language": "php-wasm",
      "content": "<?php\n\nphpinfo();"
    },
    "activeEditor": "script",
    "mode": "result"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "script": {
      "language": "php-wasm",
      "content": "<?php\n\nphpinfo();"
    },
    "activeEditor": "script",
    "mode": "result"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "script": {
      "language": "php-wasm",
      "content": "<?php\n\nphpinfo();"
    },
    "activeEditor": "script",
    "mode": "result"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

JavaScript Interoperability

JavaScript Interoperability is achieved via the VRZNO php extension.

Example:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "phpwasm": "<?php\n\n// read from DOM\n$oldTitle = vrzno_eval('document.querySelector(\"#title\").innerText');\necho $oldTitle;\n\n$newTitle = 'Changed@' . date('h:i:s');\n\n// set DOM properties\nvrzno_eval('document.querySelector(\"#title\").innerText = \"' . $newTitle . '\"' );\n\n// run console.log\nvrzno_eval('console.log(\"Hello, World!\")');\n",
    "html": "<h1 id=\"title\">Hello, PHP!</h1>\n",
    "console": "open"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "params": {
    "phpwasm": "<?php\n\n// read from DOM\n$oldTitle = vrzno_eval('document.querySelector(\"#title\").innerText');\necho $oldTitle;\n\n$newTitle = 'Changed@' . date('h:i:s');\n\n// set DOM properties\nvrzno_eval('document.querySelector(\"#title\").innerText = \"' . $newTitle . '\"' );\n\n// run console.log\nvrzno_eval('console.log(\"Hello, World!\")');\n",
    "html": "<h1 id=\"title\">Hello, PHP!</h1>\n",
    "console": "open"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "phpwasm": "<?php\n\n// read from DOM\n$oldTitle = vrzno_eval('document.querySelector(\"#title\").innerText');\necho $oldTitle;\n\n$newTitle = 'Changed@' . date('h:i:s');\n\n// set DOM properties\nvrzno_eval('document.querySelector(\"#title\").innerText = \"' . $newTitle . '\"' );\n\n// run console.log\nvrzno_eval('console.log(\"Hello, World!\")');\n",
    "html": "<h1 id=\"title\">Hello, PHP!</h1>\n",
    "console": "open"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "params": {
    "phpwasm": "<?php\n\n// read from DOM\n$oldTitle = vrzno_eval('document.querySelector(\"#title\").innerText');\necho $oldTitle;\n\n$newTitle = 'Changed@' . date('h:i:s');\n\n// set DOM properties\nvrzno_eval('document.querySelector(\"#title\").innerText = \"' . $newTitle . '\"' );\n\n// run console.log\nvrzno_eval('console.log(\"Hello, World!\")');\n",
    "html": "<h1 id=\"title\">Hello, PHP!</h1>\n",
    "console": "open"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "phpwasm": "<?php\n\n// read from DOM\n$oldTitle = vrzno_eval('document.querySelector(\"#title\").innerText');\necho $oldTitle;\n\n$newTitle = 'Changed@' . date('h:i:s');\n\n// set DOM properties\nvrzno_eval('document.querySelector(\"#title\").innerText = \"' . $newTitle . '\"' );\n\n// run console.log\nvrzno_eval('console.log(\"Hello, World!\")');\n",
    "html": "<h1 id=\"title\">Hello, PHP!</h1>\n",
    "console": "open"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Check the starter template for another example.

Language Info

Name

php-wasm

Extension

.wasm.php

Alias

phpwasm

Editor

script

Compiler

php-wasm

Version

php-wasm v0.0.7, running PHP v8.2.4

Code Formatting

Using prettier and Prettier PHP Plugin.

Example Usage

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "php-wasm"
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "php-wasm"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "php-wasm"
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "php-wasm"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

const options = {
  "template": "php-wasm"
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Starter Template

https://livecodes.io/?template=php-wasm

Links

• PHP
• PHP documentation
• php-wasm
• PHP using Uniter in LiveCodes