index.html

---
title: Algo Builder
layout: landingpage
---

<!--Header Section-->
<section class="bg-gradient pt-4 pb-6">
	<div class="container">
		<div class="row" id="header">
			<div class="col-12 align-items-center">
				<div class="heading-brand"><img src="media/logo-website.png" /></div>
				<a href="https://algobuilder.dev/auditing.html" class="btn btn-secondary svg-icon">
					<em class="mr-2" data-feather="cpu"></em>
					Auditing
				</a>
				&nbsp;
				<a href="https://algobuilder.dev/" class="btn btn-secondary svg-icon">
					<em class="mr-2" data-feather="home"></em>
					homepage
				</a>
			</div>
		</div>

		<div class="row mt-5 first-section">
			<div class="col-md-10 mx-auto text-center">
				<h2>
					Algo Builder is the number one
					<img src="assets/trophy.png" height="50px" /> trustworthy framework for Algorand
					dapps, Algorand Standard Assets, Tokens and Smart Contracts. Our mission is to make
					Algorand applications development simple, efficient, and scalable.
				</h2>

				<p class="text-left">Available packages:</p>
				<div style="font-size: x-large; margin-left: 40px">
					<ul>
						<li>
							<div class="col-sm-16 text-md-left">
								<b
									><a
										href="https://github.com/scale-it/algo-builder/tree/master/packages/algob"
									>
										algob</a
									></b
								>: a framework and CLI of the Algo Builder Suite
							</div>
						</li>
						<li>
							<div class="col-sm-16 text-md-left">
								<b
									><a
										href="https://github.com/scale-it/algo-builder/tree/master/packages/runtime"
									>
										runtime</a
									></b
								>: Light Algorand runtime and TEAL interpreter
							</div>
						</li>
						<li>
							<div class="col-sm-16 text-md-left">
								<b
									><a href="https://github.com/scale-it/algo-builder/tree/master/packages/web">
										web</a
									></b
								>: a package to interact with contracts from react app/frontend app
							</div>
						</li>
					</ul>
				</div>

				<p class="text-left">
					Algo Builder is also a repository of verified
					<a href="https://github.com/scale-it/algo-builder/tree/master/examples"
						>smart contract templates</a
					>
					that will speedup your dapp design and development process.
				</p>

				<div style="margin-top: 35px" class="doc-links">
					<a href="./guide/README" class="btn btn-success svg-icon" style="margin-right: 20px">
						<em class="mr-2" data-feather="book"></em>
						User Guide
					</a>

					<a
						href="./api/algob/index.html"
						class="btn btn-success svg-icon"
						style="margin-right: 20px"
					>
						<em class="mr-2" data-feather="book"></em>
						Algob API
					</a>

					<!-- TODO: Add link to docs here -->
					<a
						href="./api/runtime/index.html"
						class="btn btn-success svg-icon"
						style="margin-right: 20px"
					>
						<em class="mr-2" data-feather="book"></em>
						Runtime API
					</a>

					<a
						href="./api/web/index.html"
						class="btn btn-success svg-icon"
						style="margin-right: 20px"
					>
						<em class="mr-2" data-feather="book"></em>
						Web API
					</a>

					<a
						href="https://github.com/scale-it/algo-builder/tree/master/examples"
						class="btn btn-success svg-icon"
					>
						<em class="mr-2" data-feather="github"></em>
						Smart Contract templates
					</a>

					<a
						href="https://github.com/scale-it/algo-builder-templates"
						class="btn btn-success svg-icon"
					>
						<em class="mr-2" data-feather="github"></em>
						Dapp templates
					</a>

					<a href="https://algorand.github.io/js-algorand-sdk" class="btn btn-success svg-icon">
						<em class="mr-2" data-feather="github"></em>
						Algo SDK
					</a>
				</div>
			</div>
		</div>

		<div class="row mt-5">
			<div class="col-md-9 mx-auto">
				<h3 id="donate">Donate Algo Builder Development</h3>
				<p>
					Support us! Algo Builder is a community project and we want to provide the best tool
					for developing Algorand Dapps! Send us ALGOs to the following address:
				</p>

				<code class="algo-address">QN4LFBXSWN3RHZYDOTCZZBKHGRDNP3FHU4EYBK4OMUIHSA6OQ2MENAWCVI</code>
				<button
					type="button"
					class="btn btn-secondary"
					data-toggle="modal"
					data-target="#algo-donate-modal"
				>
					Show QR code
				</button>

				<br />
				In <em>memo</em> you can wite the feature you would like to prioritize.

				<!-- Modal -->
				{% include donate-modal.html %}
			</div>
			<!-- end donate col -->
		</div>

		<div class="row mt-5">
			<div class="col-md-9 mx-auto">
				<h3>Example Code</h3>
				<p>
					Check a
					<a
						style="text-decoration: underline"
						href="https://github.com/algorand/docs/blob/master/examples/assets/v2/javascript/AssetExample.js"
					>
						bare SDK
					</a>
					implementaion (it takes approx. 450 LOC). Below snippet demonstrates the same thing
					using algob in <b>18x less code</b>:
				</p>
				<div class="code-window">
					<div class="dots">
						<div class="red"></div>
						<div class="orange"></div>
						<div class="green"></div>
					</div>
					<pre
						class="language-javascript line-numbers"
					><code class="language-javascript">// Transfer Algo, create "gold" ASA and opt-in

import { executeTx, balanceOf } from '@algo-builder/algob';
import { types } from '@algo-builder/web';

async function run (runtimeEnv, deployer) {
  const masterAccount `=` deployer.accountsByName.get('master-account');
  const goldOwner `=` deployer.accountsByName.get('alice');
  const bob `=` deployer.accountsByName.get('bob');

  // transfer ALGO
  await deployer.executeTx({
    type: types.TransactionType.TransferAlgo,
    sign: types.SignType.SecretKey,
    fromAccount: masterAccount,
    toAccountAddr: goldOwner.addr,
    amountMicroAlgos: 5e6, // 5 ALGO
    payFlags: { note: 'funding account' }
  })

  await deployer.deployASA('gold', { creator: goldOwner, totalFee: 1001 });

  await deployer.optInAccountToASA('gold', 'bob', {});
}</code></pre>
				</div>
			</div>
		</div>
	</div>
</section>

<!--Features Section-->
<section class="py-6">
	<div class="container">
		<div class="row">
			<div class="col-md-9 mx-auto">
				<h2 class="text-center text-md-left">
					Reasons Why Enterprises Love <span class="text-success">Algo Builder</span>
				</h2>
				<div class="row feature-grid">
					<div class="col-sm-6">
						<div class="media">
							<div class="icon-box">
								<div class="icon-box-inner">
									<span data-feather="check-circle" width="28" height="28"></span>
								</div>
							</div>
							<div class="media-body">
								Easy to use (reduces code length by an order of magnitude)
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="media">
							<div class="icon-box">
								<div class="icon-box-inner">
									<span data-feather="feather" width="28" height="28"></span>
								</div>
							</div>
							<div class="media-body">
								Quick Setup - create your private network with one command using our scripts in
								infrastructure directory
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="media">
							<div class="icon-box">
								<div class="icon-box-inner">
									<span data-feather="book-open" width="28" height="28"></span>
								</div>
							</div>
							<div class="media-body">
								Rich documentation with Typescript typings for the Algorand JS SDK. User docs
								explaining each feature, API docs for <code>algob</code> and
								<code>runtime</code>.
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="media">
							<div class="icon-box">
								<div class="icon-box-inner">
									<span data-feather="book" width="28" height="28"></span>
								</div>
							</div>
							<div class="media-body">
								Helpful templates allowing developers to focus on use-cases rather than code
								organization
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="media">
							<div class="icon-box">
								<div class="icon-box-inner">
									<span data-feather="git-pull-request" width="28" height="28"></span>
								</div>
							</div>
							<div class="media-body">
								REPL - to quickly and easily interact with ASA and Smart Contracts
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="media">
							<div class="icon-box">
								<div class="icon-box-inner">
									<span data-feather="zap" width="28" height="28"></span>
								</div>
							</div>
							<div class="media-body">
								JS Runtime - to test smart contracts in miliseconds including complex smart
								contract composition
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<!--Features Section-->
<div class="container">
	<div class="row">
		<div class="col-md-9 mx-auto">
			<h2 class="text-center text-md-left">
				We are waiting for your feedback, create a
				<a
					style="text-decoration: underline"
					href="https://github.com/scale-it/algo-builder/issues/new/choose"
				>
					<span class="text-secondary">GitHub Issue</span></a
				>.

				<p style="margin-top: 20px">
					Do you need a help with writing a smart contracts or to audit your code? Contact us:

					<script type="text/javascript">
						contact = "@";
						contact += "algobuilder.dev";
						contact = "contact" + contact;
						document.write('<A href="mailto:' + contact + '">' + contact + "</a>");
					</script>
				</p>
			</h2>
		</div>
	</div>
</div>