diff --git a/packages/run-wasm-clarity/README.md b/packages/run-wasm-clarity/README.md
new file mode 100644
index 0000000..22ca8a2
--- /dev/null
+++ b/packages/run-wasm-clarity/README.md
@@ -0,0 +1,127 @@
+TODO: Update for Clarity
+
+
+
+
+
+
+
+# run-wasm
+
+[run-wasm](https://www.runwasm.com) is an easy to use tool for running WASM based code executions in the browser.
+
+Brought to you by [Slip](https://www.slip.so) and our amazing OSS contributors.
+
+## Install
+
+npm
+
+```bash
+npm i @run-wasm/run-wasm
+```
+
+yarn
+
+```bash
+yarn add @run-wasm/run-wasm
+```
+
+## Usage - Python
+
+After installing run-wasm you'll need to import the run-wasm python package
+
+Install run-wasm python package
+
+```bash
+npm i @run-wasm/python
+```
+
+yarn
+
+```bash
+yarn add @run-wasm/python
+```
+
+`@run-wasm/python` uses Pyodide to execute Python. We recommend using the latest version of Pyodide and bringing it into your project via a script.
+
+[Next.js example](https://github.com/slipHQ/run-wasm/blob/main/example-nextjs/pages/index.tsx)
+
+```jsx
+import React, { useEffect, useState, useRef } from 'react'
+import { createPythonClient } from '@run-wasm/python'
+import { Editor } from '@run-wasm/run-wasm
+import Script from 'next/script'
+
+declare global {
+ // <- [reference](https://stackoverflow.com/a/56458070/11542903)
+ interface Window {
+ pyodide: any
+ languagePluginLoader: any
+ loadPyodide: Function
+ }
+}
+
+const initialCode = `# Implementation of the Sieve of Eratosthenes
+# https://stackoverflow.com/questions/3939660/sieve-of-eratosthenes-finding-primes-python
+# Finds all prime numbers up to n
+def eratosthenes(n):
+ multiples = []
+ for i in range(2, n+1):
+ if i not in multiples:
+ print (i)
+ for j in range(i*i, n+1, i):
+ multiples.append(j)
+eratosthenes(100)`
+
+function App() {
+ const [pyodide, setPyodide] = useState(null)
+ const [output, setOutput] = React.useState('')
+
+ async function runCode(code: string) {
+ let pythonClient = createPythonClient(pyodide)
+ const output = await pythonClient.run({ code })
+ if (output) {
+ setOutput(output)
+ }
+ }
+
+ // Note that window.loadPyodide comes from the beforeInteractive pyodide.js Script
+ useEffect(() => {
+ window
+ .loadPyodide({
+ indexURL: 'https://cdn.jsdelivr.net/pyodide/v0.18.1/full/',
+ })
+ .then((pyodide) => {
+ setPyodide(pyodide)
+ })
+ }, [])
+
+ return (
+ <>
+
+
+
+ )
+}
+
+export default App
+```
+
+## Goal of the project
+
+The goal of this project is to build an easy way to execute various programming languages in the browser via WebAssembly.
+
+People should be able to use this project to embed executable code snippets on their websites easily!
+
+We're building this as a new component to be used inside the [Slip](https://www.slip.so) authoring tool.
diff --git a/packages/run-wasm-clarity/package.json b/packages/run-wasm-clarity/package.json
new file mode 100644
index 0000000..4ca4a5f
--- /dev/null
+++ b/packages/run-wasm-clarity/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "@run-wasm/clarity",
+ "version": "0.0.1",
+ "main": "./lib/cjs/index.js",
+ "module": "./lib/esm/index.js",
+ "types": "./lib/esm/index.d.ts",
+ "devDependencies": {
+ "typescript": "^4.4.3"
+ },
+ "scripts": {
+ "prepare": "npm run build",
+ "check-types": "tsc",
+ "build": "yarn build:esm && yarn build:cjs",
+ "build:esm": "tsc",
+ "build:cjs": "tsc --module commonjs --outDir lib/cjs"
+ },
+ "dependencies": {
+ "clarity-repl": "^0.25.0"
+ }
+}
diff --git a/packages/run-wasm-clarity/src/index.ts b/packages/run-wasm-clarity/src/index.ts
new file mode 100644
index 0000000..1458b85
--- /dev/null
+++ b/packages/run-wasm-clarity/src/index.ts
@@ -0,0 +1,44 @@
+import init, { handle_command, init_session, InitInput } from 'clarity-repl'
+
+export class ClarityClient {
+ private readonly initInput: InitInput | undefined = undefined
+
+ private readonly initCode: string = ''
+
+ /**
+ * Create a new instance of the Clarity Client
+ * @param clarityInit Clarity initialiser, eg. a URL to clarity WASM
+ * @param initCode Initialisation code to run before each code run
+ */
+ public constructor(clarityInit: InitInput, initCode: string) {
+ this.initInput = clarityInit
+ this.initCode = initCode
+ }
+
+ /**
+ * Initialise a new Clarity REPL session
+ */
+ public async initialise(): Promise {
+ await init(this.initInput)
+ await init_session('')
+ }
+
+ /**
+ * Run the given Clarity Code, returning the result
+ * @param code Code to run
+ * @returns The response from the Clarity REPL
+ */
+ public async run(code: string): Promise {
+ handle_command(this.initCode)
+ return handle_command(code)
+ }
+}
+
+const createClarityClient = (
+ clarityInit: InitInput,
+ initCode: string
+): ClarityClient => {
+ return new ClarityClient(clarityInit, initCode)
+}
+
+export { createClarityClient }
diff --git a/packages/run-wasm-clarity/tsconfig.json b/packages/run-wasm-clarity/tsconfig.json
new file mode 100644
index 0000000..e6b91dd
--- /dev/null
+++ b/packages/run-wasm-clarity/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./lib/esm"
+ },
+ "include": ["./src"]
+}
diff --git a/packages/run-wasm-clarity/yarn.lock b/packages/run-wasm-clarity/yarn.lock
new file mode 100644
index 0000000..0e80855
--- /dev/null
+++ b/packages/run-wasm-clarity/yarn.lock
@@ -0,0 +1,13 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"clarity-repl@^0.25.0":
+ "integrity" "sha512-/wLioL/6X3ZDdzi30AvavNkyL/TyKUywwuTtLs1qALOM479q6TkYPCZ2cLPUHD9eL2TQ79+4m6HQ/GeH6OEppA=="
+ "resolved" "https://registry.npmjs.org/clarity-repl/-/clarity-repl-0.25.0.tgz"
+ "version" "0.25.0"
+
+"typescript@^4.4.3":
+ "integrity" "sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA=="
+ "resolved" "https://registry.npmjs.org/typescript/-/typescript-4.4.3.tgz"
+ "version" "4.4.3"