# How to Design with Story Synth
Desinging a game for Story Synth is as easy as putting your game content in a Google Spreadsheet template and sharing a link to the sheet. You don’t need to know how to code.
# 1. Copy the template spreadsheet
There are currently six game formats, which you can read about on the Formats page.
Here are links to the Google Sheet Templates and demos for each format:
- Shuffled template (opens new window) and Shuffled demo (opens new window)
- Phases template (opens new window) and Phases demo (opens new window)
- Monster template (opens new window) and Monster demo (opens new window)
- Slot Machine template (opens new window) and Slot Machine demo (opens new window)
- Secrets template (opens new window) and Secrets demo (opens new window)
- Timed template (opens new window) and Timed demo (opens new window)
- Generator template (opens new window) and Generator Demo (opens new window)
- Hexflower Template (opens new window) and Hexflower Demo (opens new window)
Open the spreadsheet that best fits your game and then make a copy of it: File > Make a copy
# 2. Add your card content
Each template contains instructions, embedded as notes in the first row – the row containing the column headers. Don’t edit or change the first row unless specifically instructed.
Add your game’s content to the spreadsheet in the appropriate locations. Some of the columns allow for HTML - for those cells, you can embed links, images, and even css style code.
You can add or delete rows to match the length of your game.
If you are using a template that has columns for different players, you can edit those column headers (row 1) to match the player or character names. You can add or delete columns to match the number of players for your game.
# 3. Customize with Options and Extensions
Story Synth offers two approaches to customizing your game: Options and Extensions
Options allow you to customize the visual style of your game, add metadata (like Title and Blurb), rename buttons, and more. You can use options by adding them as rows in your Google Sheet. Here's a few of the most popular options but you can find the full list at Story Synth Options.
|gameTitle||Displays your game's title at the top of the page|
|gameBlurb||Includes a description of your game on the game launcher page|
|style||Adds custom CSS to change the visual style of your page|
|coverImage||Adds a cover image to your game launcher and to the first card of the game|
To use an option row, put 'option' in the first column, the option name in the second column, and your custom details in the third column. See the demo templates for examples. All options are optional – you can always leave them out.
Story Synth extensions add extra functionality to existing formats such as dice rolling, inventory management, and state tracking. They are entirely optional and some are customizable. See Story Synth Extensions for more information on the different types.
To see many of the extensions in action, check out the Sandbox Demo (opens new window).
# 4. Set the sheet to public
Story Sync needs to be able to access your spreadsheet. Click the Share button in the upper right of the page and, under the “Get Link” section, click “Change to anyone with the link” – this permits anyone with the link to view the sheet.
Now you can click “Copy link” which gives you the shareable URL. It should look something like:
# 5. Create a game page for your game
You’re now ready to connect your game to Story Synth:
- Go to storysynth.org
- Select the template you’re using from “Game Format” drdown list
- Paste in your game spreadsheet’s URL in the “Sheet” field
- Click “Create Game” to go to a page that can launch new sessions of your game
You can share this URL with anyone who wants to check out your game but it won't be searchable on the site or the internet – people won't accidently stumble across it. This page will display the game's Title, Byline, and Blurb if you have the relevant options in the spreadsheet; it will also use the style option if present.
# 6. Create a game session
From your game page, click the "Join Session" button to create and join a session where you can play your game. You can share the session URL with your players – click the link button at the top of the page or copy the URL manually.
Everyone at the same URL is part of the same session, so don’t share the same link with multiple groups of players.
# 7. Updating the spreadsheet content
Story Synth pulls the current data from your spreadsheet every time you reload the page. That means you can keep updating your content after you’ve shared the link. If you already have a browser tab open with your sheet, just refresh the page and it will have the new content.
# 8. Next Steps
If you’ve followed the steps above, you can now create and share your own games on Story Synth.
If you want to publish your game on it's own website, using the Story Synth code, check out the How to Publish guide.
If you want to extend Story Synth to add new mechanics, check out How to Extend guide.
If you have any questions, feel free to email firstname.lastname@example.org
# Icons from Game-icons.net
Story Synth contains all of the icons from Game-icons.net (opens new window), which are licensed under Creative Commons CC-BY or are in the public domain. These will work in any part of the spreadsheet where html is allowed.
To use these icons in your game:
- Find the icon you want on the Game-icons.net (opens new window) site
- Copy the URL path for that page starting with the '/' after .net and ignoring the trailing .html
- Create a image element in your spreadsheet with the
https://storysynth.org/img/game-icons/transparentfollowed by the URL path you copied and then add ".svg" to the end
- Add an
altattribute describing the icon
- Give credit back to the designer somewhere in your game (e.g. in a credits section)
The icon is black on a transparent background. If you want to change the color, you can use the
style attribute. Use
background-color to set the background color. For the stroke color, you'll need to visit this codepen (opens new window) and it will convert a hexcolor to a filter value – then paste that filter value in the img element.
For example, if I wanted to use the Sloth icon (opens new window) at
https://game-icons.net/1x1/caro-asercion/sloth.html by Caro Asercion, and then make it blue. I would copy
/1x1/caro-asercion/sloth and add it to the image source. Then I would add a style attribute with the value from the above codepen:
<img src="https://storysynth.org/img/game-icons/transparent/1x1/caro-asercion/sloth.svg" alt="a picture of a blue sloth hanging from a tree" style="filter: invert(54%) sepia(39%) saturate(4559%) hue-rotate(160deg) brightness(93%) contrast(101%);" >
If you want to embed the image in a Hexflower hex, then also set
width: 44px in the style.