Rate this page:

Sync in the Browser: a Quickstart Guide

In this guide, we'll get you up and running with a sample application you can build on as you learn more about Sync.

Table Of Contents

Gather account information

The first thing to do is grab all the necessary information from your Twilio account. To set up your Sync token generator, we will need the following:

Config Values Description
Account SID Your primary Twilio account identifier - find this on the main page of the Twilio console.
API Key Used to sign tokens. Generate one using the console API Keys tool.
API Secret Used to sign tokens, together with the corresponding API Key.

Download, configure, and run the starter server app

Choose a download package for your server-side language of choice. If you're primarily a front-end developer and don't have a strong preference, Python, Node.js, or Ruby will probably get you up and running the fastest.

Follow the instructions in the README for each starter application to configure and run it on your machine, using the values above. You may ignore configuration values for other products; we'll focus on Sync for now.

Explore the web/server starter app

This is where the fun begins! When you visit the homepage of the starter application, you should see a page which looks like this:


You have been assigned a random user identity and opened a Sync document called "SyncGame". If you open this page in another browser window or tab, you should be able to play an X or O on the board and see the game board replicate across the other tab.

The HTML and CSS in the starter application aren't terribly interesting, but the JavaScript code driving this application has a few very important jobs:

  1. Fetch an AccessToken from the server via Ajax
  2. Initialize Sync JavaScript SDK
  3. Open a Sync document called "".
  4. Handle UI events to update the document or refresh the document when other users make changes

We explore how to manage your users in our user identity guide, and cover everything you can do with Sync objects in the Sync Objects Overview.

Get Help

Need some extra help? Send us a note at, and we'll make sure to get you running just as quick as we can. Have fun building with Sync, and make sure to let us know what you're building!

Next: Managing Identity and Access Tokens »

Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.


        Thank you for your feedback!

        We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

        Sending your feedback...
        🎉 Thank you for your feedback!
        Something went wrong. Please try again.

        Thanks for your feedback!

        Refer us and get $10 in 3 simple steps!

        Step 1

        Get link

        Get a free personal referral link here

        Step 2

        Give $10

        Your user signs up and upgrade using link

        Step 3

        Get $10

        1,250 free SMSes
        OR 1,000 free voice mins
        OR 12,000 chats
        OR more