+
+
+
+The official Aleo SDK providing Javascript/Typescript tools for creating zero knowledge app.
+
+### ⚡ Build your own app
+
+Start here with the [documentation](./typescript/00_sdk_overview.md) and follow the instructions to install the [Aleo SDK](https://github.com/AleoHQ/sdk/tree/testnet3/sdk#readme) to get started building your
+first zero knowledge web app.
+
+#### Source: [`sdk/sdk`](https://github.com/AleoHQ/sdk/tree/testnet3/sdk)
+
+
+## 2. [Create-Aleo-App](./create-aleo-app/00_app_installation.md) - Zero Knowledge Web App Examples
+
+ 
+
+
+Create-aleo-app provides zero-knowledge web app examples in common web frameworks such as React. Developers looking to
+start with working examples should start here.
+
+### ⚡ Build your own app
+
+
+You can start with a template by running
+```bash
+npm create aleo-app@latest
+```
+
+#### Source: [`sdk/create-aleo-app`](https://github.com/AleoHQ/sdk/tree/testnet3/create-aleo-app)
+
+## 3. [Aleo-Wasm](./wasm/00_wasm_installation.md) - Zero Knowledge Algorithms in JavaScript + WebAssembly
+
+ 
+ 
+ 
+
+
+Aleo Wasm is a Rust crate which compiles Aleo code responsible for creating and executing zero knowledge programs into
+WebAssembly.
+
+When compiled with `wasm-pack` JavaScript bindings are generated for the WebAssembly allowing Aleo zero
+knowledge programs to be used in the browser ande NodeJS. This package is available on NPM (linked above). The
+[documentation](./wasm/00_wasm_installation.md) provides instructions for compiling this [crate](https://github.com/AleoHQ/sdk/tree/testnet3/wasm) and using it in web projects for those interested in building from
+source.
+
+❗ Currently program execution is only available in web Browsers. However, account, program and data management within
+NodeJS is functional.
+
+Source: [`sdk/wasm`](https://github.com/AleoHQ/sdk/tree/testnet3/wasm)
+
+## 📚 Documentation
+
+#### [API Documentation](https://developer.aleo.org)
+API Documentation, tutorials for the Aleo SDK, and documentation on how to build Leo and Aleo Instructions programs can
+be found on the [Aleo Developer Docs](https://developer.aleo.org) page.
+
+#### [SDK Readme](https://github.com/AleoHQ/sdk/tree/testnet3/sdk#readme)
+The SDK Readme provides concepts core to executing zero knowledge programs in the web and several detailed examples of
+how to use the SDK to build web apps using Aleo.
+
+#### [Aleo Wasm Readme](https://github.com/AleoHQ/sdk/tree/testnet3/wasm#readme)
+The Aleo Wasm Readme provides instructions for compiling the Aleo Wasm crate and using it in web projects. Those who
+want to build from source or create their own WebAssembly bindings should start here
diff --git a/documentation/sdk/create-aleo-app/00_app_installation.md b/documentation/sdk/create-aleo-app/00_app_installation.md
new file mode 100644
index 0000000000..45c6629f8e
--- /dev/null
+++ b/documentation/sdk/create-aleo-app/00_app_installation.md
@@ -0,0 +1,42 @@
+---
+id: installation
+title: Create Aleo App
+sidebar_label: Installation
+---
+
+
+
+## Scaffolding Your First Aleo Project
+
+:::note
+**Compatibility:**
+[Node.js](https://nodejs.org/en/) version 18+
+:::
+
+With NPM:
+
+```bash
+$ npm create aleo-app@latest
+```
+
+Then follow the prompts!
+
+You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold an Aleo + React project, run:
+
+```bash
+# npm 6.x
+npm create aleo-app@latest my-aleo-app --template react
+
+# npm 7+, extra double-dash is needed:
+npm create aleo-app@latest my-aleo-app -- --template react
+```
+
+Currently supported template presets include:
+
+- `react`
+
+You can use `.` for the project name to scaffold in the current directory.
+
+## More Information
+
+Based off of create-vite: https://github.com/vitejs/vite/tree/main/packages/create-vite
\ No newline at end of file
diff --git a/documentation/sdk/typescript/00_sdk_overview.md b/documentation/sdk/typescript/00_sdk_overview.md
index 2704cda74a..a44e68b49b 100644
--- a/documentation/sdk/typescript/00_sdk_overview.md
+++ b/documentation/sdk/typescript/00_sdk_overview.md
@@ -1,31 +1,1178 @@
---
id: overview
-title: Aleo SDK
-sidebar_label: Overview
+title: Javascript/Typescript
+sidebar_label: Guide
---
+
-[**@aleohq/sdk**](https://www.npmjs.com/package/@aleohq/sdk)
+
-Aleo high-level utilities in javascript to handle Accounts, Records, and Node connections in the browser.
+
-Makes use of [**@aleohq/wasm**](https://www.npmjs.com/package/@aleohq/wasm) under the hood.
-Happy hacking!
+## Tools for Building Zero Knowledge Web Apps
-## Build Guide
+The Aleo SDK is a collection of JavaScript libraries for building zero knowledge web applications in both the browser
+and node.js.
-1. To build the project, go to the project's root and execute `npm install && npm run build`.
+## Overview
-## Documentation
+Aleo provides the ability to run programs in zero knowledge. The Aleo SDK provides the tools to use these programs
+within the browser and all other levels of the web stack to build privacy preserving applications.
-1. To view the documentation, open `docs/index.html`.
-2. To regenerate the documentation, run `npx jsdoc --configure jsdoc.json --verbose`
+The Aleo SDK provides the following functionality (Click to see examples):
+1. [Aleo account management](https://aleo.tools/account)
+2. [Web-based program execution and deployment](https://aleo.tools/develop)
+3. [Aleo credit transfers](https://aleo.tools/transfer)
+4. [Management of program state and data](https://aleo.tools/record)
+5. [Communication with the Aleo network](https://aleo.tools/rest)
-## Aleo Tools
+## Table of Contents
-
-[Aleo SDK account generator](https://aleo.tools/)
+* [Installation](#Installation)
+* [Usage](#Usage)
+ * [Zero Knowledge Web App Examples](#Zero-Knowledge-Web-App-Examples)
+ * [Create Aleo App](#create-aleo-app)
+ * [Aleo.tools](#aleotools)
+ * [Create An Aleo Account](#1-create-an-aleo-account)
+ * [Execute Aleo Programs](#2-execute-aleo-programs)
+ * [Aleo Programs](#21-aleo-programs)
+ * [Program Execution Model](#22-program-execution-model)
+ * [WebAssembly Initialization](#23-webassembly-initialization)
+ * [Local Program Execution](#24-local-program-execution)
+ * [Online Program Execution](#25-program-execution-on-the-aleo-network)
+ * [Program Proving Keys and Records](#26-program-proving-keys--program-records)
+ * [Deploy Programs](#27-deploy-a-new-program-to-the-aleo-network)
+ * [React Example](#28-react-example)
+ * [Aleo Credit Transfers](#3-aleo-credit-transfers)
+ * [Aleo Credits](#31-aleo-credits)
+ * [Transfer Aleo Credits](#32-transfer-aleo-credits)
+ * [Check Public Balances](#32-checking-public-balances)
+ * [Program Data and Private State](#4-managing-program-data-and-private-state)
+ * [Private State Data: Records](#41-private-state-data-records)
+ * [Record Usage Example](#42-record-usage-example-private-value-transfers)
+ * [Public State Data: Mappings](#43-public-state-data-mappings)
+ * [Reading Mappings](#44-reading-mappings)
+ * [Initializing and Updating Mappings](#45-initializing--updating-mappings)
+ * [Communicating with the Aleo Network](#5-communicating-with-the-aleo-network)
+* [Further Documentation](#further-documentation)
-[Aleo Home](https://www.aleo.org/)
-
-You can visit the [SnarkVM repo](https://github.com/AleoHQ/snarkVM) and [SnarkOS repo](https://github.com/AleoHQ/snarkOS) to go deep into the code of aleo infrastructure
+## Installation
+
+### NPM
+
+To install the Aleo SDK from NPM run:
+
+`npm install @aleohq/sdk` or `yarn add @aleohq/sdk`.
+
+### Build from source
+
+To build the project from source, go to this project's root and execute:
+
+`npm install && npm run build`
+
+## Usage
+
+## Zero Knowledge Web App Examples
+
+### Create Aleo App
+A set of fully functional examples of zero knowledge web apps can be found in
+[create-aleo-app](https://github.com/AleoHQ/sdk/tree/testnet3/create-aleo-app). Create-aleo-app provides several web-app
+templates in common web frameworks such as React that can be used as a starting point for building zero knowledge web apps.
+
+Developers can get started immediately with create-react-app by running:
+`npm create aleo-app@latest`
+
+### Aleo.tools
+
+Additionally, the SDK powers [aleo.tools](https://aleo.tools) - a React app that provides a graphical interface for most
+of the functionality provided by the SDK and can be used as a reference for usage of the SDK. Source code for aleo.tools
+can be found [in the SDK repo here](https://github.com/AleoHQ/sdk/tree/testnet3/website)
+
+## 1. Create an Aleo Account
+
+The first step in operating a zero knowledge web application is creating a cryptographic identity for a user. In the
+context of Aleo, this process starts by generating a private key. From this private key, several keys that enable a user
+to interact with Aleo programs can be derived.
+
+These keys include:
+#### Private Key
+The key used to represent an identity of an individual user. This key is used to authorize zero
+knowledge program execution.
+#### View Key
+This key is derived from the private key and can be used to identify all records and transaction data that
+belongs to an individual user.
+#### Compute Key
+A key that can be used to trustlessly run applications and generate transactions on a user's behalf.
+#### Address
+A public address that can be used to trustlessly identify a user in order for that user to receive official
+Aleo credits or unique data defined by other zero-knowledge Aleo programs.
+
+All of these keys can be created using the account object:
+```typescript
+import { Account } from '@aleohq/sdk';
+
+const account = new Account();
+
+// Individual keys can be then be accessed through the following methods
+const privateKey = account.privateKey();
+const viewKey = account.viewKey();
+const address = account.address();
+```
+
+Please note that all keys are considered sensitive information and should be stored securely.
+
+## 2. Execute Aleo Programs
+
+### 2.1 Aleo Programs
+
+Aleo programs provide the ability for users to make any input or output of a program private and prove that the program
+was run correctly. Keeping program inputs and outputs private allows developers to build privacy into their applications.
+
+Zero-Knowledge programs are written in one of two languages:
+1. [Leo](https://developer.aleo.org/leo/language): A high level, developer friendly language for developing
+ zero knowledge programs.
+2. [Aleo Instructions](https://developer.aleo.org/aleo/): A low level language that provides developers fine
+ grained control over the execution flow of zero knowledge programs. Leo programs are compiled into Aleo Instructions
+ under the hood.
+
+Documentation for both languages can be found at [developer.aleo.org](https://developer.aleo.org).
+
+#### Hello world in the Leo Language
+```
+// A simple program adding two numbers together
+program helloworld.aleo {
+ transition hello(public a: u32, b: u32) -> u32 {
+ let c: u32 = a + b;
+ return c;
+ }
+}
+```
+
+#### Hello world in Aleo instructions
+```
+program helloworld.aleo;
+
+// The leo code above compiles to the following Aleo instructions
+function hello:
+ input r0 as u32.public;
+ input r1 as u32.private;
+ add r0 r1 into r2;
+ output r2 as u32.private;
+```
+
+### 2.2 Program Execution Model
+
+The SDK provides the ability execute Aleo Instructions programs %100 client-side within the browser.
+
+The `ProgramManager` object encapsulates the functionality for executing programs and making zero knowledge proofs about
+them. Under the hood it uses cryptographic code compiled from [SnarkVM](https://developer.aleo.org/aleo) into WebAssembly.
+JavaScript bindings to this WebAssembly code allows execution of programs in zero knowledge fully within the browser
+without requiring any external communication with the internet. Users interested in lower level details how this is
+achieved can visit the [aleo-wasm](https://github.com/AleoHQ/sdk/tree/testnet3/wasm) crate.
+
+The basic execution flow of a program is as follows:
+1. A web app is loaded with an instance of the `ProgramManager` object
+2. An Aleo program in `Aleo Instructions` format is loaded into the `ProgramManager` as a wasm object
+3. The web app provides a user input form for the program
+4. The user submits the inputs and the zero knowledge execution is performed client-side within WebAssembly
+5. The result is returned to the user
+6. (Optional) A fully encrypted zero knowledge transcript of the execution is optionally sent to the Aleo network
+
+A diagramatic representation of the program execution flow is shown below.
+```mermaid
+graph LR
+ p1[Leo Program]
+ p2[Aleo Instructions]
+
+ subgraph Browser Web-App
+ subgraph ProgramManager
+ subgraph Aleo-Wasm-Module
+ in-memory-program
+ end
+ end
+ end
+
+ p1-->p2--load program--oin-memory-program-.ZK result.->user
+ user-.user input.->in-memory-program
+ in-memory-program-."ZK result (Optional)".->Aleo-Network
+```
+
+### 2.3 WebAssembly Initialization
+
+❗WebAssembly must be initialized before any SDK functions can be called.
+
+Aleo programs are made zero knowledge through the usage of `ZkSnarks`. The Rust code behind Aleo programs and the ZkSnarks
+that make them zero knowledge are hosted in the [SnarkVM Repostiory](https://github.com/AleoHQ/SnarkVM). The Aleo SDK
+compiles this code to WebAssembly and creates JavaScript bindings, enabling Aleo programs to run directly in the browser.
+
+Before any logic within the SDK is run within the browser however, the WebAssembly module the SDK contains must be
+initialized before any SDK functions can be executed. This is done simply by calling the `initializeWasm` function at a
+point in your code before any other SDK functions are called:
+```typescript
+import { Account, initializeWasm } from '@aleohq/sdk';
+
+// Assuming top-level await is enabled. This can also be initialized within a promise.
+await initializeWasm();
+
+/// Create a new Aleo account
+const account = new Account();
+````
+
+An example of how to initialize WebAssembly in a React app is shown in [Section 2.7](#27-React-Example)
+
+### 2.4 Local Program Execution
+A simple example of running the hello world program within the web browser is shown below:
+```typescript
+import { Account, Program } from '@aleohq/sdk';
+
+/// Create the source for the "hello world" program
+const program = "program helloworld.aleo;\n\nfunction hello:\n input r0 as u32.public;\n input r1 as u32.private;\n add r0 r1 into r2;\n output r2 as u32.private;\n";
+const programManager = new ProgramManager();
+
+/// Create a temporary account for the execution of the program
+const account = new Account();
+programManager.setAccount(account);
+
+/// Get the response and ensure that the program executed correctly
+const executionResponse = await programManager.executeOffline(program, "hello", ["5u32", "5u32"]);
+const result = executionResponse.getOutputs();
+assert(result === ["10u32"]);
+```
+
+### 2.5 Program execution on the Aleo Network
+The SDK also provides the ability to execute programs and record an encrypted transcript of the execution on the Aleo
+network that anyone can trustlessly verify.
+
+This process can be thought of being executed in three steps:
+1. A program is run locally
+2. A proof that the program was executed correctly and that the outputs follow from the inputs is generated
+3. A transcript of the proof is generated client-side containing encrypted proof data (see [Section 2.6](#4-managing-records-and-private-state))
+ and any public outputs or state the user of the program wishes to reveal
+4. The proof transcript is posted to the Aleo network and verified by the Aleo validator nodes in a trustless manner
+5. If the proof is valid, it is stored and anyone can later verify the proof and read the outputs the author of the
+ program has chosen to make public. Private inputs will remain encrypted, but the author of the proof can also choose to
+ retrieve this encrypted state at any point and decrypt it locally for their own use.
+
+This process of posting the execution to the Aleo Network serves as a globally trustless and verifiable record of
+program execution. It also provides a global record of any state changes made to either records or data stored on the Aleo network.
+
+A simple example of running the hello world program on the Aleo network is shown below:
+```typescript
+import { Account, AleoNetworkClient, NetworkRecordProvider, ProgramManager, KeySearchParams} from '@aleohq/sdk';
+
+// Create a key provider that will be used to find public proving & verifying keys for Aleo programs
+const keyProvider = new AleoKeyProvider();
+keyProvider.useCache = true;
+
+// Create a record provider that will be used to find records and transaction data for Aleo programs
+const networkClient = new AleoNetworkClient("https://vm.aleo.org/api");
+const recordProvider = new NetworkRecordProvider(account, networkClient);
+
+// Initialize a program manager to talk to the Aleo network with the configured key and record providers
+const programName = "hello_hello.aleo";
+const programManager = new ProgramManager("https://vm.aleo.org/api", keyProvider, recordProvider);
+
+// Provide a key search parameter to find the correct key for the program if they are stored in a memory cache
+const keySearchParams = { "cacheKey": "hello_hello:hello" };
+const tx_id = await programManager.execute(programName, "hello_hello", 0.020, ["5u32", "5u32"], undefined, undefined, undefined, keySearchParams);
+const transaction = await programManager.networkClient.getTransaction(tx_id);
+```
+
+A reader of the above example may notice the `RecordProvider` and `KeyProvider` classes that were not present in the local
+execution example. The `KeyProvider` class helps users of the SDK find `Proving Keys` for programs. `Proving Keys`
+allow zero knowledge proofs that the programs were executed correctly to be created. The `RecordProvider` class helps
+find `Records` which are private data associated with programs that can be changed and updated throughout time.
+These two concepts are explained in more detail below.
+
+### 2.6 Program Proving Keys & Program Records
+
+Executing Aleo programs in zero knowledge requires two additional pieces of information.
+
+1. **Function Proving & Verifying Keys:** Proving and Verifying keys are cryptographic keys that are generated when a
+ program function is executed. These keys are public and unique for each function in a program. The proving key allows any party to
+ execute the program and generate a proof that the program was executed correctly. The verifying keys allow any party
+ to verify that the proof was generated correctly and the execution is correct. These keys are required to create the
+ zero knowledge property of program execution.
+2. **Program Records:** Records are private state generated by a program belonging to a unique private keyholder. Records
+ are generated by a program's functions and can be changed and updated by when a user runs various functions of the
+ program. These records are private by default and are used to manage updatable private state. One of the most clear
+ usages of records is to the `credits` record in the `credits.aleo`. Credits records are one of two official ways of
+ representing Aleo credits on the Aleo Network and are used to pay all transaction fees on the network. More information
+ on Records can be found in the [Records](#41-private-state-data--records) section below.
+
+For this reason, all programs will need proving and verifying keys to operate and many functions in Aleo programs will
+require records as inputs. To simplify the process of managing keys and records, the Aleo SDK provides two abstractions
+for managing these concepts:
+
+1. **KeyProvider:** When programs execute, by default, they will synthesize the proving and verifying keys needed to
+ make a zero knowledge proof. However, these keys are large and expensive to generate. For this reason, applications may
+ want to store these keys and re-use them for future execution. The `KeyProvider` interface provides the ability for
+ users of the SDK to provide their own key storage and retrieval mechanism. The SDK provides a default implementation
+ of the `KeyProvider` interface via the `AleoKeyProvider` class.
+2. **RecordProvider:** When programs execute, they will often need to find records that belong to a user. The
+ `RecordProvider` interface allows users of the SDK to implement their own record storage and retrieval mechanism. The
+ SDK provides a default implementation of the `RecordProvider` interface via the `NetworkRecordProvider` class which
+ searches the Aleo network for records uniquely belonging to a user.
+
+The `ProgramManager` class is capable of taking a `KeyProvider` and `RecordProvider` as arguments and will use them to
+find the correct keys and records for a program execution.
+
+### 2.7 Deploy a new Program to the Aleo Network
+
+The Aleo Network contains a public registry of programs that can be executed by anyone. Any user can add an Aleo program
+to the network (as long as it doesn't already currently exist) by paying a deployment fee in Aleo credits. The SDK
+provides a simple interface for deploying programs to the Aleo network using the program manager.
+
+```typescript
+import { Account, AleoNetworkClient, NetworkRecordProvider, ProgramManager, KeySearchParams} from '@aleohq/sdk';
+
+// Create a key provider that will be used to find public proving & verifying keys for Aleo programs
+const keyProvider = new AleoKeyProvider();
+keyProvider.useCache = true;
+
+// Create a record provider that will be used to find records and transaction data for Aleo programs
+const networkClient = new AleoNetworkClient("https://vm.aleo.org/api");
+const recordProvider = new NetworkRecordProvider(account, networkClient);
+
+// Initialize a program manager to talk to the Aleo network with the configured key and record providers
+const programManager = new ProgramManager("https://vm.aleo.org/api", keyProvider, recordProvider);
+
+// Define an Aleo program to deploy
+const program = "program hello_hello.aleo;\n\nfunction hello:\n input r0 as u32.public;\n input r1 as u32.private;\n add r0 r1 into r2;\n output r2 as u32.private;\n";
+
+// Define a fee to pay to deploy the program
+const fee = 1.8; // 1.8 Aleo credits
+
+// Deploy the program to the Aleo network
+const tx_id = await programManager.deploy(program, fee);
+
+// Verify the transaction was successful
+const transaction = await programManager.networkClient.getTransaction(tx_id);
+```
+
+### 2.8 React Example
+
+The above concepts can be tied together in a concrete example of a React web app. This example can be installed in one
+step by running:
+
+`npm create aleo-app@latest`
+
+#### Wasm Initialization
+
+Before functionality from the SDK can be used, the WASM module must be initialized within the browser. A common way of
+achieving this within a React App is using a React UseEffect hook.
+
+`aleo-wasm-hook.js`
+```jsx
+import { useEffect, useState } from "react";
+import * as sdk from "@aleohq/sdk";
+
+await sdk.initializeWasm();
+export const useAleoWASM = () => {
+ const [aleoInstance, setAleoInstance] = useState(null);
+
+ useEffect(() => {
+ if (aleoInstance === null) {
+ setAleoInstance(sdk);
+ }
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+ return aleoInstance;
+};
+````
+Once a hook for the WASM initialization is created, it can be used anywhere within the app.
+
+#### Program Execution
+
+Program execution is a computationally expensive process. For this reason, it is recommended to execute programs in
+webworkers.
+
++ +
++ +
+
+ Edit src/App.jsx and save to test HMR
+
+ Click on the Aleo and React logos to learn more +
+ + ); +} + +export default App; +``` +
+
+
[![github]](https://github.com/AleoHQ/sdk) [![crates-io]](https://crates.io/crates/aleo-wasm) [![docs-rs]](https://docs.rs/aleo-wasm/latest/aleo-wasm/)