├── CHANGELOG.md ├── README.md ├── faq.md └── getting-started.md /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 📅 February 28, 2025 2 | 3 | ### Get your friends & family off the waitlist! 4 | 5 | We added the ability for you to get your friends and family off the waitlist. Enter into any Spark then click on your user icon in the bottom left corner of the screen to open the menu. Click on "Invite Friends" to open the invite panel and complete the form. We'll grant your friends and family access shortly after you submit the form. 6 | 7 | Screenshot 2025-02-28 at 16 55 33 8 | 9 | Screenshot 2025-02-28 at 16 55 59 10 | 11 | ### More features & bug fixes 12 | 13 | * Fixed a bug that was preventing reliable persistence of data 14 | * Added the ability to share Sparks that were shared with you 15 | * We cleaned up the generation UI on the main dashboard 16 | 17 | ## 📅 February 21, 2025 18 | 19 | ### Targeted editing (functional & visual) 20 | 21 | Make specific functional and visual changes to existing sparks using targeted editing. In the Iterate panel click the crosshairs icon to open the targeted editing pane in the app preview display. 22 | 23 | https://github.com/user-attachments/assets/8dd7b8d3-b06f-4a5b-9859-7bcc7898f778 24 | 25 | ### Star shared sparks 26 | 27 | When anyone shares their sparks with you, you can now star them and save them to your own dashboard without having to fork (just click the spark title to star). This makes it easier for you and loved ones to use the same spark (think shared meal planning & grocery list apps, family calendars, roommate chore trackers, a trivia app for friends, budgeting app for couples etc). 28 | 29 | Screenshot 2025-02-21 at 19 55 38 30 | 31 | ![image (2)](https://github.com/user-attachments/assets/cde716ee-749e-4548-92a8-523d91fc4c51) 32 | 33 | ### Inspiration sparks 34 | 35 | In the main dashboard we now always show a variety of inspiration sparks that you can generate with 1-click, or use to come up with new ideas for sparks of your own. 36 | 37 | Screenshot 2025-02-21 at 19 37 49 38 | 39 | ### More features & bug fixes 40 | 41 | * Made data & code syncing more reliable, and offer users choice on how to handle sync conflicts 42 | * The ability to share sparks from your main dashboard 43 | * You can now share feedback with the Spark team from the bounce menu in the app, or email spark-feedback@github.com 44 | * Open sparks in edit mode on Desktop for faster access to spark refinements 45 | * Fixed issue with old iteration prompts showing up in different sparks 46 | * Fixed more code generation failure scenarios 47 | * Fixed some buttons requiring multiple taps on Mobile from tooltips 48 | 49 | ## 📅 February 14, 2025 50 | 51 | ### Data panel redesign 52 | 53 | We've upgraded the Data panel! Instead of editing freeform JSON, you now have a graphical interface that mirrors the structure of your data, making edits safer and more intuitive. Feeling adventurous? The raw JSON edit mode is still available when you need it. Let us know what you think! 54 | 55 | https://github.com/user-attachments/assets/25b73cc5-f966-4e1f-9809-3963f90573a9 56 | 57 | ### More features & bug fixes 58 | 59 | - Added an inline autofix button to errors in the Logs panel 60 | - Improved model reliability, fixing more scenarios where Spark might stop generating code before it's finished 61 | - Fixed rendering long instructions in the Iterate panel 62 | 63 | ## 📅 February 7, 2025 64 | 65 | - Show a confirmation dialog when you click "Delete" in the data panel 66 | - Add even more tooltips, this time to the workspace toolbar 67 | - Prioritize showing the spark preview when generating code on mobile 68 | - Add new Discord invite link to user menu 69 | 70 | ## 📅 February 1, 2025 71 | 72 | ### Thumbs down menu improvements 73 | 74 | We previously introduced the 👎 button so that you can conveniently fix and revert changes that didn't go quite how you'd hoped for. Now we also include potential improvements that are customized for your particular spark. Just answer a few yes/no questions and you can kick off an iteration immediately by hitting "yes" if you see a change you want made. We're continuing to tune this feature and very much appreciate any feedback provided via [our Discord](https://github.com/githubnext/github-spark-user-manual/tree/main?tab=readme-ov-file#feedback). 75 | 76 | image 77 | 78 | ### More features & bug fixes 79 | 80 | - Show more details when the history menu is expanded 81 | - Add label to fullscreen exit button 82 | - Show a red notification dot when errors are present in the log panel 83 | - Auto scroll to the latest log when the log panel is open 84 | - Enable text selection for prompts in editor header 85 | - Added tooltips to sidenav 86 | 87 | ## 📅 January 17, 2025 88 | 89 | ### Icons for spark PWAs 90 | 91 | As a follow-on to [last week's PWA support](#install-individual-sparks-as-pwas), Spark now generates custom icons for your sparks (in this example, both the metronome and the gym tracker are from Spark): 92 | 93 | image 94 | 95 | These new app icons automatically use your theme's accent color. The theme panel now has a new control to pick a different icon if you'd like to try something different, and clicking your spark's name will show you a preview of the icon if your spark were saved as a PWA. 96 | 97 | ### More features & bug fixes 98 | 99 | - Code generation using Claude 3.5 Sonnet is now much more reliable 100 | - Now clicking autofix after experiencing an error immediately triggers a repair attempt 101 | - Improved editor in the Prompts panel with more reliable variable detection and ability to edit variables directly 102 | - Improve loading state to have more stable UI 103 | - Disallow code editing while code is being generated 104 | - 105 | ## 📅 January 10, 2025 106 | 107 | ### Install individual sparks as PWAs 108 | 109 | Now in addition to letting you install Spark-the-editor on say, your phone, you can also install individual sparks, including ones shared with you. 110 | 111 | https://github.com/user-attachments/assets/3155f62b-2ff8-4bbe-845a-25fbf9d73ba5 112 | 113 | ### More features & bug fixes 114 | 115 | - Spark names are now used as page titles 116 | - Scrolling through code as it streams in doesn't jump around anymore 117 | - Make Spark less likely to generate code that uses `alert()` or `confirm()` in favor of in-app UI 118 | - Fixed text cursor jumping while editing 119 | - Fixed login to redirect you back to the original URL you were trying to view 120 | 121 | ## 📅 December 20, 2024 122 | 123 | ### URL context 124 | 125 | Spark now considers context found in URLs you provide when creating a new spark or iterating on an existing one. Nudge Spark towards using particular libraries by including a link to their docs, or ask it to choose a color palette based on an image URL. This is just the start of being able to provide more context while creating your sparks, as we'll be adding more types of context and more features to interact with them. 126 | 127 | ### Prompts panel 128 | 129 | Did you know that in addition to sparks being generated by LLMs that they can also make use of LLMs themselves at runtime? The "Prompts panel" lets you view and edit prompts in your sparks, all without needing to look at any code. Once saved, your spark's code is transparently updated. 130 | 131 | We've just released the beginnings of more fleshed out prompting controls, now with improved editing that makes it easier to edit variables used within your prompts. 132 | 133 | image 134 | 135 | ## 📅 December 13, 2024 136 | 137 | ### Improvements to suggestions 138 | 139 | We've made improvements to the suggested next steps feature we introduced last week: 140 | 141 | * You can request an entirely new set of suggestions 142 | * You can individually dismiss suggestions and a new one will be generated in its place 143 | * When generating new suggestions, it will take into consideration which ones you previously dismissed 144 | 145 | 146 | 147 | ### More iteration controls 148 | 149 | We've made it easier to take next steps when an iteration isn't quite what you wanted. There's a new 👎 menu in the toolbar that will let you either fully _Revert_ the most recent iteration, or _Revert & retry_, which will prefill the Iterate panel with the same prompt you just used, giving you the opportunity to further edit the prompt or try with a different model. And if Spark detects any errors, there's a new "Auto fix" button that will prefill the Iterate panel with information about the error. We've found the models to be quite good at fixing most errors – though if you find any particularly tricky ones we'd love for you to let us know in [our Discord](https://github.com/githubnext/github-spark-user-manual/tree/main?tab=readme-ov-file#feedback). 150 | 151 | 152 | 153 | ### New mobile design 154 | 155 | We've refreshed our mobile design to better match our recent [design changes on Desktop](#new-spark-editor-layout-on-desktop). All tabs are now only a single tap away, whereas previously some were hidden behind a menu. 156 | 157 | https://github.com/user-attachments/assets/08f9c2f0-fcd4-484b-a2ef-56b1f7882700 158 | 159 | ### New dialog component 160 | 161 | We've added a new `Dialog` component to the built-in Spark design system. 162 | 163 | image 164 | 165 | ### Quick history access 166 | 167 | On Desktop we've added buttons to let you navigate history more easily. Click around and reminisce on how your spark evolved! 168 | 169 | image 170 | 171 | ## 📅 December 6, 2024 172 | 173 | ### Suggested next steps 174 | 175 | The Iterate panel now suggests next steps. For example, here are some fun (and useful!) ideas on what we could do next with one of our metronome sparks 176 | 177 | image 178 | 179 | Less typing, more iterating! 180 | 181 | ### Seed data 182 | 183 | We now generate sample data when you're building a spark that persists data. This simulates how your spark might behave after you've used it for a while, and gives you the opportunity to immediately iterate on a new one without having to add your own test data first. 184 | 185 | 186 | 187 | ### Use natural language to change the theme 188 | 189 | You can now use natural language to tweak your theme: 190 | 191 | image 192 | 193 | And now brand new sparks will automatically choose accent colors, like the basketball game tracker above in the "Seed data" section that automatically chooses orange. (We apologize for waiting to add this until after Halloween!) 194 | 195 | ### More theming controls 196 | 197 | #### Secondary accent colors 198 | 199 | Add a secondary accent color to spice up your sparks: 200 | 201 | 202 | 203 | #### More fonts 204 | 205 | We added support for more varied fonts: 206 | 207 | image 208 | 209 | ### Improved variants layout 210 | 211 | On Desktop we've moved variants out of the Iterate panel and have given them some space to breathe: 212 | 213 | image 214 | 215 | ## 📅 November 22, 2024 216 | 217 | ### Features and enhancements 218 | 219 | #### New Spark editor layout on desktop 220 | 221 | We've listened to your feedback and just added a brand new layout for desktop that makes much better use of the space available on larger screens. By default this new layout gives plenty of room for the spark you're interacting with, and you can optionally expand the new sidebar and then even open multiple panels at once. We're excited about continuing to refine the editor UI and make our panels even more powerful! 222 | 223 | 224 | 225 | #### More icons! 226 | 227 | Sparks are now more likely to automatically include icons when building UI. Sparks now default to using [Phosphor icons](https://phosphoricons.com/), which is a huge and varied set of icons. 228 | 229 | 230 | 231 | #### Theme panel enhancements 232 | 233 | And now you can control icon styling – like thin, bold, or our favorite, duotone – right from the Theme panel. 234 | We've also added the ability to quickly change fonts, and expanded the number of accent colors. 235 | 236 | accent colors 237 | 238 | #### Built-in Markdown component 239 | 240 | We've added a new Markdown component that sparks will now automatically use in order to easily render Markdown. This is especially nice for rendering LLM responses when called at runtime from sparks, but it's also great for little one-off utilities too! 241 | 242 | 243 | 244 | ## 📅 November 15, 2024 245 | 246 | ### Features and enhancements 247 | 248 | #### Raycast extension 249 | 250 | We've created an extension for Raycast to make it even quicker to try out your ideas for new sparks. Instead of navigating to existing apps, this essentially lets you "navigate" to brand new apps that are created on demand. 251 | 252 | Once installed, just search for the extension... 253 | 254 | image 255 | 256 | ...and get to creating! 257 | 258 | ![image](https://github.com/user-attachments/assets/c6f08673-6b37-4443-aab8-0bcc1b339cef) 259 | 260 | Grab the extension today at . 261 | 262 | #### Create new sparks straight from the URL 263 | 264 | Behind-the-scenes the Raycast extension makes use of another new feature: the ability to create a new spark straight from any URL bar. Using `https://spark.githubnext.com/new/`, you can jump straight into a brand new spark. You can also specify which model to use and whether to generate variants: `https://spark.githubnext.com/new/make a tic tac toe game that's lizard themed?model=sonnet&generateVariants=true`. We're curious to see what other integrations people will make using these URLs! 265 | 266 | #### Added support for more Web APIs 267 | 268 | We've added support for more advanced web APIs in the spark runtime, including [Web MIDI](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API), [Web Bluetooth](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API), and [WebUSB](https://developer.mozilla.org/en-US/docs/Web/API/USB). 269 | 270 | Here's a quick MIDI event viewer at , but we're even more excited about you all will create, from custom synthesizers to interactive visualizations. 271 | 272 | image 273 | 274 | #### Made it easier to work with prompts 275 | 276 | You all have been busy typing! These are the first steps we're taking to make creating and refining sparks a little smoother. First, some breathing room! In both the dashboard and the editor you can now see multiple lines of text: 277 | 278 | image 279 | 280 | And to make it easier to tweak your wording, you can go back to your previous prompt by pressing `Up Arrow` in the iterate textbox. 281 | 282 | #### Improved custom colors in dark mode 283 | 284 | When tweaking colors on some elements, some sparks would only look correct in light or dark mode and not have enough contrast in the other. We've now made it so sparks use adaptive color palettes by default and automatically adjust custom styled elements to light/dark mode. 285 | 286 | ### Bug fixes 287 | 288 | This is where we fight every patch note writer's instinct to write "General system stability improvements" and call it a day. But you deserve more! 289 | 290 | - **Improved code generation reliability:** we identified the most common cases causing generated code to not run on the first try. We've solved many of these, through a combination of runtime tweaks, and being even nicer to our models. 291 | - **Improved syncing reliability**: some sparks were consistently failing to sync, which is now fixed. 292 | - **Save your work-in-progress prompts**: we no longer clear the prompt when you switch between tabs. Can't figure out how to word your instructions until you change the theme from green to orange? Well this fix is for you! 293 | - **Fixed rendering of the "none" border radius choice**: blocky elements might not be our thing, but we didn't mean to stop you! The "none" option should work much more consistently now. 294 | 295 | ## 📅 October 29, 2024 296 | 297 | Initial release at GitHub Universe 2024! 🚀 298 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 📖 GitHub Spark User Manual 2 | 3 | Welcome! 👋 This is the user manual for [GitHub Spark](https://gh.io/spark), an experiment by [GitHub Next](https://githubnext.com). GitHub Spark is an AI-powered tool for creating and sharing micro apps (“sparks”), which can be tailored to your exact needs and preferences, and are directly usable from your desktop and mobile devices. **Without needing to write or deploy any code.** ✨ 4 | 5 | If you'd like to learn more about GitHub Spark, you can check out its [project page](https://githubnext.com/projects/github-spark/), or review any of the resources outlined below. 6 | 7 | ## Table of Contents 8 | 9 | * [Getting started](getting-started.md) 10 | * [FAQ](faq.md) 11 | * [CHANGELOG](CHANGELOG.md) 12 | 13 | ## Feedback 14 | 15 | To give general feedback, please join the [GitHub Next Discord](https://discord.gg/FeGshJZ2yy) and post in the [#github-spark](https://discord.com/channels/735557230698692749/1237161687233200279) forum channel. Please provide a share link to the spark and a description of the issue you're facing so that we can help you more effectively. 16 | 17 | To report harmful content, please email copilot-safety@github.com with a description of the issue and a share link to the spark. 18 | -------------------------------------------------------------------------------- /faq.md: -------------------------------------------------------------------------------- 1 | # ℹ️ Frequently asked questions 2 | 3 | Hello! This FAQ is living document, which tries to capture any and all of the interesting questions that folks might have about GitHub Spark. If you don't see something below, then feel free to open an issue on this repom and we can respond with a PR to fix it 🫡 4 | 5 | ## Why "Spark"? 6 | 7 | Because it can serve as the **spark** of inspiration/curiosity for your software-based ideas. But also, because it just sounds cool 😎 8 | 9 | ## Is it "Spark" or "spark"? 10 | 11 | The service/tool is called "GitHub Spark". But the apps you create with it are called "sparks" (e.g. "Hey did you check out that spark that I shared with you?"). And again, "sparks" just sounds cool 😎 12 | 13 | ## Which models does GitHub Spark support? 14 | 15 | Currently, it allows you to choose between Claude Sonnet 3.5, GPT-4o, o1-preview, and o1-mini. However, we'll be constantly evaluating new models, in order to ensure that GitHub Spark provides users with access to the latest/best AI. 16 | 17 | ## What kind of apps can GitHub Spark create? 18 | 19 | Currently, it's focused on generating mobile web apps, which use a static front-end, and make use of the GitHub Spark runtime APIs (data storage, user permissions, LLM access, etc.), as well as other external APIs (as needed). 20 | 21 | ## What is the GitHub Spark design system built on? 22 | 23 | The built-in components in GitHub Spark are built upon React and [Radix UI](https://www.radix-ui.com), and our design system is built around [Tailwind](https://tailwindcss.com/) and [Heroicons](https://heroicons.com/). We love all of these projects, and are grateful to be able to leverage their amazing work 💙 24 | -------------------------------------------------------------------------------- /getting-started.md: -------------------------------------------------------------------------------- 1 | # 🏃 Getting started 2 | 3 | Once you've been admitted off the GitHub Spark waitlist (you'll get an e-mail), getting started is simple! 4 | 5 | 1. Open your browser and navigate to https://spark.githubnext.com 6 | 7 | 1. Sign in with the same GitHub account that you registered with on the waitlist 8 | 9 | 1. From the dashboard page, enter a request for an app idea (e.g. `a tic tac toe game`, and then press `` 10 | 11 | After a few moments--and a pretty loading screen experience--you should see your shiny new spark ✨ 12 | 13 | From here, you can continue to iterate on your spark, by specifying new revisions via the `Iterate` tab in the action bar at the bottom. Additionally, you can select different models, and try generating variants, in order to explore other options/directions for a revision 👍 14 | 15 | ## Other fun things to try... 16 | 17 | 1. Hover over the history timeline on the left, and navigate through your revisions 18 | 2. Make an app that stores data, and ask GitHub Spark to save/load it. Then check out the `Data` tab in the action bar 🚀 19 | 3. Ask GitHub Spark to use AI to perform some sort of generative AI task (e.g. summarizing or generate content). Then check out the `Prompts` tab in the action bar 🤖 20 | 4. Install the GitHub Spark dashboard as a PWA on your desktop or phone, so you can easily create and access your sparks 21 | --------------------------------------------------------------------------------