{"id":21529160,"url":"https://github.com/everx-labs/ton-client-web-js","last_synced_at":"2026-03-01T02:06:33.456Z","repository":{"id":57377862,"uuid":"206296209","full_name":"everx-labs/ton-client-web-js","owner":"everx-labs","description":"TON Labs SDK Client Library for Web Browsers","archived":false,"fork":false,"pushed_at":"2024-08-28T11:12:15.000Z","size":1662,"stargazers_count":11,"open_issues_count":1,"forks_count":1,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-10-25T08:42:56.178Z","etag":null,"topics":["api","blockchain","everscale","hacktoberfest","sdk","tonlabs","web3","web3js"],"latest_commit_sha":null,"homepage":"https://docs.ton.dev/86757ecb2/p/92b041-overview","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/everx-labs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-09-04T10:45:09.000Z","updated_at":"2024-04-26T13:25:07.000Z","dependencies_parsed_at":"2025-10-05T13:27:12.298Z","dependency_job_id":null,"html_url":"https://github.com/everx-labs/ton-client-web-js","commit_stats":null,"previous_names":["everx-labs/ton-client-web-js","tonlabs/ton-client-web-js"],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/everx-labs/ton-client-web-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everx-labs%2Fton-client-web-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everx-labs%2Fton-client-web-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everx-labs%2Fton-client-web-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everx-labs%2Fton-client-web-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/everx-labs","download_url":"https://codeload.github.com/everx-labs/ton-client-web-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/everx-labs%2Fton-client-web-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29958445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T01:47:18.291Z","status":"online","status_checked_at":"2026-03-01T02:00:07.437Z","response_time":124,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","blockchain","everscale","hacktoberfest","sdk","tonlabs","web3","web3js"],"created_at":"2024-11-24T01:56:02.055Z","updated_at":"2026-03-01T02:06:28.424Z","avatar_url":"https://github.com/everx-labs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TON Javascript Web SDK\n\n[![npm publish](https://github.com/tonlabs/ton-client-web-js/workflows/npm%20publish/badge.svg)](https://www.npmjs.com/package/ton-client-web-js)\n\n## Community links:\n\n[![Chat on Telegram](https://img.shields.io/badge/chat-on%20telegram-9cf.svg)](https://t.me/ton_sdk)  [![Gitter](https://badges.gitter.im/ton-sdk/community.svg)](https://gitter.im/ton-sdk/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n\n## Documentation\n\n[GraphQL API and SDK documentation](https://docs.ton.dev/86757ecb2/p/92b041-overview)\n\nThe JavaScript SDK implements the client-side libraries used by applications working with TON OS GraphQL API.  \nThis package supports web (browser), mobile-web, and server (Node.js) clients. \n\n[Common Javascript SDK](https://github.com/tonlabs/ton-client-js) is distributed via [npm package](https://www.npmjs.com/package/ton-client-js).\n\n\n**Attention!** Because the JS library uses pre-compiled [core sdk rust library](https://github.com/tonlabs/TON-SDK), you need to \ninstall it via platform-dependable [web package](https://www.npmjs.com/package/ton-client-web-js)  that will automatically \ninstall common js package +  download and link pre-compiled rust core to your project:\n\n\n```\nnpm install ton-client-web-js\n```\n\nTo get started using TON Javascript SDK, see [Add SDK to your Application](https://docs.ton.dev/86757ecb2/p/622af4-web).\n\n\n# Using `ton-client-web-js`\n\n## Requirements\n\nYou can run `ton-client-web-js` in a browser.\n\nIn this example, we'll use webpack to manage assets. Since it requires [Node.js](nodejs.org), you’ll need to install the latest version.\n\nLet's start with a clean  [webpack](https://webpack.js.org/) project:\n\n```bash\nmkdir HelloTonClient\ncd HelloTonClient\nnpm init -y\nnpm install webpack webpack-cli --save-dev\n```\n\nNow create the starting files in the root directory of the project:\n\n```\n |- /src\n   |- index.js\n |- /dist\n   |- index.html\n```\n\nHere, the `src` file contains our source code for further webpack usage, and `dist` contains files that are directly served to the browser.\n\nNext, create `dist/index.html` in your directory. It will act as the browser entry point:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eExample\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript src=\"main.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nWebpack will later use `src` to generate `main.js`.\n\nUse npm to install `ton-client-web-js` package:\n\n```\nnpm install ton-client-web-js\n```\n\nTo copy `tonclient.wasm` from `node_modules\\ton-client-web-js` use `copy-webpack-plugin` in `webpack.config.js`.\n\nInstall copy-webpack-plugin\n```\nnpm install copy-webpack-plugin --save-dev\n```\nNext, create `webpack.config.js` in your directory \n```js\nconst CopyPlugin = require('copy-webpack-plugin');\n\nmodule.exports = {\n  mode: 'development',\n  plugins: [\n    new CopyPlugin({\n      patterns: [\n        { from: './node_modules/ton-client-web-js/tonclient.wasm' }\n      ],\n    }),\n  ],\n};\n```\n\nFinally, add the code below to `src/index.js`:\n\n```js\nimport { TONClient, setWasmOptions } from 'ton-client-web-js';\n\nfunction addHTML(message) {\n    document.body.insertAdjacentHTML(\"beforeend\", `\u003cp\u003e${message}\u003c/p\u003e`);\n}\n\nwindow.addEventListener('load', () =\u003e {\n    (async () =\u003e {\n        // Adding an HTML update function\n        setWasmOptions({\n            addHTML,\n        });\n        let createStart = Date.now();\n        // creating a TONClient wit a net.ton.dev connection\n        const client = await TONClient.create({\n            servers: ['net.ton.dev']\n        });\n        // requesting TONClient creation time stamp\n        addHTML(`Client creation time: ${(Date.now() - createStart)}`);\n        // displaying the current client version\n        addHTML(`Client version: ${await client.config.getVersion()}`);\n        addHTML(`Client connected to: ${await client.config.data.servers}`);\n        const queryStart = Date.now();\n        // requesting top 10 accounts sorted by balance from net.ton.dev/graphql\n        const accounts = await client.queries.accounts.query({}, 'id balance', [{path:'balance', direction:'DESC'}], 10);\n        addHTML(`Query time: ${(Date.now() - queryStart)}`);\n        // displaying the data\n        addHTML(`\u003ctable\u003e${accounts.map(x =\u003e `\u003ctr\u003e\u003ctd\u003e${x.id}\u003c/td\u003e\u003ctd\u003e${BigInt(x.balance)}\u003c/td\u003e\u003c/tr\u003e`).join('')}\u003c/table\u003e`);\n        // displaying the data received time stamp\n        addHTML(`Now is: ${new Date()}`);\n    })();\n});\n```\n\nTo finish the example, let's build a `dist/main.js` from our source:\n\n```\nnpx webpack\n```\n\nTo check if it works we'll need a simple HTTP server:\n\n```\nnpm install light-server\n```\n\nNow you can run your app:\n\n```\nnpx light-server -s dist\n```\n\nDoing so will show you the links to the app within the browser.\nOpen your browser and take a look at your first app!\nHit CTRL-C to stop the server.\n\n---\nSee [https://docs.ton.dev/86757ecb2/p/92b041-overview](https://docs.ton.dev/86757ecb2/p/92b041-overview) for documentation\n\n\n---\nCopyright 2018-2020 TON DEV SOLUTIONS LTD.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feverx-labs%2Fton-client-web-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feverx-labs%2Fton-client-web-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feverx-labs%2Fton-client-web-js/lists"}