Recently, we launched a whole new set of starter apps on Glitch, with the goal of making it nearly instant to build apps using the latest and greatest frameworks. Naturally, while creating these new experiences, we wanted things to be simple. But that raised an important question:

Going back a few years, we built Glitch around the idea that anyone should be able to create a real website or app using standard code, right from their browser, and have it up and running instantly. Today, that’s more or less the case, and the evidence is that clever folks (like you!) have used Glitch to build over ten million apps.

For some users, like students learning to code for the first time, “simple” may best mean “has the fewest distractions”. And in that context, distractions can be things like metadata or configuration options that, while useful for a production website, might require a lot of confusing explanation at a point when a learner is first trying to understand the major concepts they’re wrangling with.

By contrast, for coders who may be familiar with web development in general, but might not know the specifics of a new framework that they’re trying out for the first time (or for the first time in a long time), the typical boilerplate that one might see in an app are familiar and reassuring parts of a web page that they expect to see. And so, “simple” means “it handles all those little default chores for you, so you don’t have to”.

These are both valid expressions of “simple”, and both vitally important to audiences we care deeply about. Having simple experiences that anybody can use to start coding productively is a key part of tackling the stress we call "stack anxiety".  But these two versions of simplicity are also mutually exclusive — we can’t make an app that’s “simple” by having fewer lines of distracting metadata while simultaneously making one that’s “simple” by giving you all the default metadata out of the box. We can’t be simple by automatically handling configuration while also being simple by making it easy to customize configuration.

So we took an uncharacteristic path for Glitch: We chose both.

Typically, we’ve had a strong bias toward being opinionated, while offering customization under that hood. That way, we can have a predictable experience that users on the platform can share, and also we can smooth the rough edges of one particular designed experience. But we’re at a stage of maturity and familiarity with the ways that people want to build on Glitch which lets us offer a little more flexibility without losing that ease of use.

We took an uncharacteristic path for Glitch: We chose both.

Thus: “Hello” and “mvp”. (Here, we're using "mvp" to mean "minimum viable product", a common industry term for the simplest version of a project that could possibly do the job.) For each of our common frameworks, we offer each of these two options:

Hello: a starter app that’s set up with all the most popular default configuration settings and boilerplate provided for you out of the box

MVP: a starter app that’s the absolute minimum to get you running, with nothing that you might want to delete and no distractions of anything unfamiliar

These two approaches encompass two different but valuable views of simplicity:

“Do it for me, but let me change it later if I need to”

“Don’t do anything for me except the essentials, so I don’t have any distractions”

We’d love to hear how those choices work for you, and also how you think about what “simple” is for creating. The early response to these choices has been phenomenal. One way we could tell that this approach is working is by looking at examples like these Preact starters, created by a community member, which already follow the implicit convention we’ve been creating. The fact that people in the community can intuit how these kinds of examples should work means that it’s comprehensible enough for people to understand the whole system, not just one individual implementation. And it’s creators in the community who see the benefit.

We’ll be accelerating our creation of opinionated new starter apps in both flavors of “simple”, using the toolkits, frameworks and libraries you’ve asked for most. If you want to be part of creating one, or to see your favorite technology featured, reach out and share your ideas (or example apps!) with us. And if you’ve tried out the new, simpler starter apps, let us know what would make them even more useful for your workflow. We want things to be as simple as possible.

Recently, we launched a whole new set of starter apps on Glitch, with the goal of making it nearly instant to build apps using the latest and greatest frameworks. Naturally, while creating these new experiences, we wanted things to be simple. But that raised an important question:

What kind of simple?

What do we mean by "simple"?

If you follow developer conversations online, you’ve no doubt seen various people saying things like “Everybody ought to try this one new framework!” or “Nobody should still be using that old library!” or “That programming language is dead!” Very broad, sweeping, seemingly-authoritative statements, often made without considering the context by which others make their technical decisions. They don’t always do much to make things easier for people who just want to create. You've probably also seen people worrying about all the prerequisites and technical dependencies that get in their way every time they try to create something new. It’s gotten harder than ever just to _try_ the new frameworks and libraries that come out every day, let alone give them a fair, in-depth assessment. Trudging through installation, configuration, dependency hell, and all the other parts of setup can have you feeling burnt out even before you set out to learn a new syntax or design pattern.

In short, the way that coders encounter new technologies that are supposed to help them seems perfectly designed to create what we could call “stack anxiety”. We can sum it up as two big worries:

Concern that one isn’t using the “right” tools or frameworks, not on technical grounds but on social ones

Fatigue or worry about all the overhead involved in trying out new frameworks or libraries, with lots of technical barriers that have nothing to do with coding itself

Put together, these two big causes of stack anxiety are like a perfect recipe for sucking all the fun out of coding.

Stack anxiety is a lot like FOMO — it’s exacerbated by how we talk about coding, especially on social media. Thought pieces written by people who are (or who sound like) experts, even when well-intentioned, can have a huge negative impact on coders who are just starting out. And we're all newbies sometimes, whether it's because we're new to a particular framework, or because we're new to coding in general.

The end result is the coding equivalent of looking at your Instagram and comparing yourself to an influencer whose entire job is to look appealing on social media. You’re gonna feel bad! And you never see all the hard work they're doing behind the scenes, often with a whole team helping them do it.

This painful pattern often makes the most vulnerable coders feel bad for making choices that are often perfectly reasonable, or for which they didn’t really have much choice due to legacy or other constraints. Sometimes you just can’t use that tech that it seems like all the “cool kids” are talking about. And sometimes, even if a technology is really interesting, getting it set up and running takes up all the time or energy we have, leaving no time for, you know, the actual coding.

We’ve thought a lot about stresses like Stack Anxiety when making Glitch, because we’re deeply focused on removing any barriers that get in the way of quickly creating apps. And here’s what we've found: barriers to coding are as likely to be social or structural as they are technical.

A lot of times, the hard part about coding isn't the coding.

So, how are we trying to make sure Glitch reduces everyone's anxiety a little bit? By addressing the issue at a few different levels.

You've got this! One consistent part of how we've designed Glitch's community is to make sure everyone is encouraged and rewarded for being thoughtful and supportive to one another, not critical of their choices. For example, in lots of places where you see another person's avatar on Glitch, you can instantly click to thank them. (And we'll be working to expand this to almost every place you can connect with people on Glitch.) When so much of coding culture is about tearing apart other people's work or trying to seem smarter by being critical of their creations, it can mean a lot to know someone has your back. It even goes all the way to Glitch's very name — we chose a name that means a little mistake or problem, because we all have bugs sometimes, and it can be reassuring to know that we can fix them together.

Really good defaults. Recently, we created an all new set of starter apps for people to remix and get started with as they build new apps on Glitch. It’s a bit counterintuitive, but part of the reason we spent a lot of time choosing really great default stack choices on these starter apps is so that you don’t have to. You’re not getting into some personal or political battle when you pick a JavaScript framework on Glitch, you're just getting something that runs great, instantly, and lets you focus on your ideas and your coding.

Instant setup. How many times have you lost all your momentum on creating a new project because you get stuck trying to wrangle dependencies, or configure new components that you have to install, or because something in your dev environment breaks in a way that takes forever to debug? One key goal of Glitch is to eliminate those entire categories of stresses — especially because it can be so hard to feel inspired and motivated to make something new if the first thing you encounter is a whole lot of exhausting chores.

The great part is, over the last few years, the Glitch community has fully adopted this ethos. Everyone works together to support community members and creators in having less stack anxiety overall. For example, we’ve documented the rationale behind our opinionated choices for each part of the stack in our new starter apps. But that's not trying to say “this is the One True Way”. Rather, it’s so you can understand the choices being made, and keep your focus and energy on the problem you’re trying to solve. If you run into any issues, these default choices were made with the goal in mind of ensuring you’d be able to find others using the same tools in similar ways — whether that’s in the Glitch community or out on the internet at large. We wanted to make it as likely as possible that getting your app running wouldn’t involve having to justify, defend, or explain your technical choices to anyone who wasn’t trying to help you build.

Ultimately, that's what all this work boils down to. The social aspects of coding, and connecting to other coders, should be reassuring us about the choices we make, and the tools we rely on. Trying new things should be exciting and rewarding, not a moment that inspires fear of what's about to happen. There are so many more cool apps and projects just waiting to be made, to solve real problems or express meaningful ideas. We just have to support each other in making an environment where the social and technical barriers to coding don't get in the way of unleashing that creative potential.

Trying to end "Stack Anxiety"

Around the web, May was about many things: a rainbow of M1 iMacs, very hungry caterpillars, bags of gasoline, Mare of Easttown, the list goes on. But here on Glitch, we celebrated new app starters, the BTS army, colors like you’ve never seen, and of course, some amazing remixes. But one thing was for certain – May was a season about fun and reawakening, and we definitely saw those themes in the apps that you all created during the past month.   

Hello, starter apps! Not only did folks do some awesome remixing of our new starters for React and Eleventy, but they also began to create more!

~glitch-hello-vuetify is a simple Vuetify 3 starter, based on the Vue 3 starter, created by @Stylix58.

~Elm-Lang is a clean Elm language app scaffolding, created by @christianp.

~hello-webpack-typescript, created by @KumuPaul is a template for building a vanilla single page application with Webpack.

@jonathan-annett created ~glitch-zenpoint-repl which allows you to run a REPL via Glitch. A REPL, or read–eval–print loop, is a development tool that allows you to interact with objects in your code.

~mdn-content-popularity lists Mozilla Developer Network (mdn) content by popularity, which is a pretty cool API if you ask us. Hats off to @tomayac!

~alternative-twitter-embeds, created by @stefan, allow you to embed tweets without compromising your users’ privacy and your site’s performance. 

~guessrgb is an RGB guessing game, and related to color is ~find-css-colors which is a cute CSS color name picker.

~blink-blink uses Tensorflow and your webcam to change the background when you blink, created by @monolesan. We can’t wait to see this being remixed to create a cool photo booth app or game that you can play with just your eyes!

A project from MIT’s Feminist Futures hackathon, ~reproconvos is both a physical card set, and a digital set, built by @blouhie and @althea.rao. The cards are a set for Conversations For Every Dinner Table, and give prompts to discuss topics like postpartum issues, menstruation, pregnancy, reproductive health, and more. 

~are-we-done-yet is a really fun and also infuriating game by @dmmanesh that tests your patience but it’s hard to stop playing.

The BTS army has been using Glitch to track streams for years and on May 21, a new single came out ~butter~, which means a new viral BTS site for it—you guessed it: ~bts-butter went up too.

~bequiet is an audio-reactive experiment by@dnlsmm using Hydra! 

Just look at how ~color-twist renders, we wish it would go on forever. Created by @bengarvey.

We absolutely love this notation editor because it seems like the start of something incredibly useful to music writers. 

~fluid-expressions, by @sharma.sas, is an artwork that “takes the form of a work of online speculative fiction centered around the design and craft of an object called a memory capsule.”

~css-ch-typography, by @equinusocio, is a short, sweet, but super informative tool for understanding what "ch" units in css typography are.

We love how @celalexis makes a photography portfolio interactive with ~nurraihan. 

Apps for blogging or using Glitch, featured on the Glitch blog.

You have to check out the Glitch In the Wild app, created by @khalby786, which is a really awesome list of tools available for developers on Glitch and was crowdsourced by the wonderful folks in the Glitch support forum!

~oregano-blog is a little blogging app created by @aTylerRobertson powered by Markdown, Express, Showdown and Pug.

Created by @SteGriff, the app ~thats-no-moon enables you to build your own Glitch-y loader. 

~datapointe by @ipen is a MOST CLEVERLY named data visualization project about ballet 🩰

Data of New York is a Twitter and Mastodon bot, built by @stefan that tweets maps created using data from NYC Open Data and Mapbox. You read more about it in this short write-up.

~hen-worlds is a cryptocurrency hackathon project (specifically for hic et nunc) that explores what a metaverse for hic et nunc would be. It embeds (from our understanding) NFTs from IPFS within an a-frame virtual world.

And just like that, we’re into a new month. Thank you so much for all of the wisdom, surprise, and delight that you bring to Glitch! We can’t wait to see what you come up with next month. If you have Glitch projects you built or love and want us to feature, share them on the forum, tweet them to us @glitch or email community@glitch.com - You may just end up in our next roundup! ✨

The project featured in this post’s header image is ~laboratoriomedusa, built with Hydra, the Nix-based continuous build system, by @tacacocoding as a visualizer for their friend’s album.

Last month on Glitch, May 2021 edition

Around a year ago, I had come across a number of super clever, little apps on Glitch that appeared to be from some kind of hackathon. I assumed it was from a one-off event, but then it kept happening! I found that they were coming from a small community of creative coders working off of prompts from a project called Sunday Sites, led by a graphic designer and web enthusiast from Sweden, John Bengtsson. After spending hours looking at all of the past submissions, I reached out to John to learn more about this really inspiring and surprising community and project.

Jenn: What is Sunday Sites and how/why did it get its start?

John: Sunday Sites is a community built around creating hand coded websites in a  playful manner, and it welcomes people from all skill groups to join. Around  once a month, I send out a newsletter with an invitation to a so called  “session” that I organize over video chat. In these sessions (always on Sundays), we create websites for two hours, using only HTML and CSS, and then spend the next hour or so talking about our creations. Each session is guided by an “instruction,” a prompt which I often keep  pretty vague, just to help with generating ideas. The sites are then  showcased on SundaySites.cafe, which functions as the hub of the  project.

Sunday Sites started as my graduation project in January last year (I graduated Beckmans College of Design last spring and am now working at a design agency in Stockholm). For a very long time I’d been fascinated  by early internet art and the way that relatively simple tools were used  to explore new ways of interaction. Other themes I was interested in were collective creativity, online identity and internet culture in  general. I combined my points of interest with inspiration from  HTML.energy (by Laurel Schwulst and Elliott Cost) and Ritklubben (a graduation project by Beckmans alumnus Emelinn Heikkinen) and started forming ideas for what would become Sunday Sites.

~dingbatday, a Sunday Sites submission by @lina.reidarsdotter.kallstrom

What is it about Glitch that made you choose it as the recommended platform for hosting projects from these sessions?

First  of all because it’s so easy to use. One of the goals of the project is  to sort of democratize creative coding, and to show how easy it is  nowadays to build yourself a home on the web. Glitch is a really good  tool for that as you don’t need to know how to upload anything to a  server, mess around with DNS records or think about which text editor to  get. It’s also great for making websites come to life fast, as  everything updates in real-time, so it’s easy to share your site after  the two hours of coding is over, or if you want someone’s opinion on  something during the session.

What were your expectations when you scheduled the first session, and what was the outcome?

The  first few sessions were only joined by me and some friends from school,  and I hoped for maybe two or three other people to join after a while  so I could continue organizing a few sessions over the summer. However,  early on I posted a link to the project to Special.fish, and that link then had a life of its own on other platforms on the web,  which lead to an unexpected increase in newsletter subscribers. So,  after realizing that people seemed to like the initiative, I set up  plans for making it happen at least once a month, and since then it has  grown slowly but steadily.

One of the goals of the project is  to sort of democratize creative coding, and to show how easy it is  nowadays to build yourself a home on the web. Glitch is a really good  tool for that...

It’s been over a year since the first session. How has the project changed, if at all, since then?

In  some ways it hasn’t changed at all – the structure of the project is  still very much the same. At the same time, as more people join and  bring their energy into the project, it has started to feel more and  more alive. If anything, the format just has become more distilled as  time has passed and I’ve removed unnecessary components to be able to  focus more on the act of making websites together.

I love how discrete and simple the prompts are! Where/who do they come  from and what do you think makes a great creative coding prompt?

I  often start with a vague idea of a website I want to make or a theme I  want to explore, and then I write down the most important aspect of my  idea so it can be interpreted in different ways. I think a good prompt  needs to be concrete enough to guide the participants through the start  of the process, but at the same time it should be open-ended enough for  them to pick it up and turn into something of their own.

The  tone of my prompts is loosely based on Fluxus poetry, like Yoko Ono’s  “Grapefruit,” where actions with varying levels of absurdity are  described in a very dry and precise way. They often act as scripts for  surreal performance pieces, and I thought that would be a good fit for a  project about making artistic websites.

What are some of your favorite submissions so far?

https://tiana.computer/sunday_sites/word.html

Hover over John’s own app ~colorfulplant for some beautiful movement!

Are there any trends (content, code or aesthetic) that you’ve seen with submissions over the past year?

The  marquee tag turns up every now and then, and most of the sites use  standard web-safe fonts, but other than that I can’t really think of any  strong trends among the sites. That would probably be easier to spot  for someone with an outside perspective.

I’ve  had plans for a long time to build a website for everything that  doesn’t fit on my portfolio site – like code experiments, writings and  more abstract kinds of design. I’m excited to start working on that when  I have the time. I also have some super secret  plans on how to expand the Sunday Sites project a bit, and I wish to  make those plans reality soon as well.

Shouts out to John, as well as the Sunday Sites community! To find out when the next Sunday Sites session is, subscribe to the Sunday Sites newsletter. And if you build or see an app on Glitch that you want us to feature, let us know! Email community@glitch.com or tweet @glitch. 😎

The project featured in this post’s header image is of Sunday Sites submission, ~day-friend, by @fishthursdays.

Originally a graduate project, Sunday Sites has evolved into a community of creative coders building the most interesting things on the web.

Coding for the weekend, a q+a with Sunday Sites creator John Bengtsson

We just launched generated static sites! 🎉 This has been an in-flight feature for a long time, and something I’m really excited to finally see out in the world. There are a lot of moving pieces, but the most important thing to take away is this: generated static sites allow you to run a development process and, when you’re done editing, Glitch will run your `npm run build` script and upload that optimized build to the glitch.me domain every project gets free.

The new starter projects were created for remixing. This bumps up our two templates (hello-express and hello-webpage) to four (website, node, react, eleventy) with opinionated and minimal versions of each. Thinking through the technology choices for each starter and choosing the packages that we were endorsing was an exciting challenge, and we were able to build on the incredible work the open-source community has been doing since we last created new starters. Let’s walk through the new starters and what powers them to give you a better idea of how they’ll help you get started building your idea in seconds.

Our previous Node.js starter, hello-express, was in daily use but starting to fall behind modern Node best practices. Looking at the landscape of Node web servers, there was a clear choice: Fastify. The speed gives us the ability to serve more pages, faster, from the glitch containers. It’s also great how easily extensible Fastify is. Having validation built-in didn’t hurt. We are really excited about what Fastify will allow us to build going forward and how to leverage it for Glitch users; plus, we can build Glitch-specific plugins to interface with our asset management, fully-powered terminal, etc., in the future. There isn’t a lot of boilerplate needed to instantly create an API, so we were able to keep both the opinionated and minimal versions of the Node.js starter fairly straightforward.

We’ve had trouble in the past getting the React development process to be performant on Glitch servers, so solving the speed problem was the #1 priority. Fortunately, our team didn’t have to do much of the work here and instead could rely on Vite to do the heavy lifting. It starts immediately, supports TypeScript and JSX, and has hot module reload enabled by default. That significantly reduced the surface area we needed to build ourselves to support a lightning-fast React workflow.

One way Vite achieves these incredible speeds is by bundling all of your dependencies (in ~glitch-hello-react they are: React, Wouter and react-helmet-async) with ESBuild. ESBuild is an extremely fast JavaScript bundler written in Go. Most likely you aren’t changing your dependencies nearly as much as your code, so it can do that once and only build again when you add a new dependency or upgrade the version.

When you close the editor and stop working on your site, it runs the Vite build process in the background which creates an optimized bundle with Rollup. That means you can take advantage of the wild world of Rollup plugins. We serve this fast production bundle at your free glitch.me domain until you start working in the editor again.

Static site generators are all the rage today, and for good reason. Eleventy cares about speed, ease of use, and—most importantly—the experience of someone browsing your site. When you run the Eleventy build script, it takes all of your files and creates a bundle that can be loaded by those still using AOL dialup. (Please let us know if you are still using AOL dialup!)

The Eleventy starters list is a scoreboard with Lighthouse scores, pushing Eleventy builders to make a performant site that anyone on any connection can view. As website bundles get more and more bloated, Eleventy pushes for as little JavaScript as possible, and uses it only where you need it.

Our  ~glitch-hello-eleventy starter has support for blog posts in Markdown, beautiful styling, and instructions for adding more complexity if you need it. The minimal template was built by the Eleventy team.

Along with support for Eleventy, we’re supporting all of the Eleventy projects that others have built. Want a high-performance blog with image optimizations and analytics? Check out eleventy-high-performance-blog. Something a little more designed, that uses Tailwind CSS and a JS framework (Alpine.js)? Try 11ta.

These are just our starters using the new generated static site functionality. You can apply the same concepts to a Vue site, or Svelte! Any code you can run in the build script that outputs to a build folder can take advantage of this new functionality. Just add this configuration to your package.json:

"glitch": {
  "projectType": "generated_static"
},

That will tell Glitch to treat your project as a generated static site so you have a development environment when you want it, and a production site on your glitch.me domain when you’re done.

So, why not remix one of these starters and create a new project right now? 

Glitch engineer, Keith Kurson, discusses the tech stack and opinions behind our new lineup of Glitch starter apps

A closer look at the new Glitch starter apps

We can’t think of a better way to start off a recap of last month than to say that it’s never been easier to get started with Glitch since the recent introduction of our starter apps, including React and Eleventy. We’re already seeing some fantastic new sites, remixes, and suggestions for even more starters!

And finally, after all those winter months, April brought a spring bounty of creativity, art, tools, and a healthy dose of internet magic/nostalgia/silliness to the Glitch community. Here is what you created, curated, incubated, and disseminated during last month. 

For anybody who wants to get started with Webpack on Glitch, @KumuPaul  created a very minimalist Webpack app with support for hot module reloading. Try out ~hello-webpack-typescript and see the new TypeScript syntax highlighting in action!

Finally, someone brave enough to speak out about JavaScript, @tesseralis, has created this handy ~js-psa.

Preview your markdown rendering in a multitude of themes with ~multimark by @javaarchive.

We love these collections of demos created by @matdesl. ~p5-demos shows you p5.js examples of generative art, motion graphics, and interactive design, and ~tone-demos gives you examples using Tone.js for interactive and procedural sound. Try them out!

~state-of-nyc is a map app by @jordanderson that with each refresh moves the population of a handful of cities across the map so you can get the scope of the differences in population around the country. 

~wikidata-explorer is a remix of ~evergiven-everywhere by @ramiroaznar that visualizes wikidata queries. It’s awesome to see EE used as a remixable starter for other map apps!

Bill Gates Land Ownership is an app by @doniecasey that lets you see the scale of how much land the Gates owned.

@eojthebrave scraped the #DrupalCon attendance once a minute from Hopin to visualize the flow of the conference and you can check it out here.

~tubatutorials by @lanek85502, will teach you how to play the tuba in less steps than you would think!

Glitch often comes up in this incremental_games subreddit. It's just folks being wholesome, creating and sharing games that have incremental mechanisms. Try out ~1stgame, by @Dravitar, or  ~sushibeans by @corbancg to start, but only if you can stand to lose focus/attention for hours.

We love this 2048 clone, ~2048-1070835 by sabrina15hallie using characters instead of numbers. 

Here is your new obsession: with this Gigapet-inspired cat sim by @dpalencia you can remix it to create one for your own cats...we have.

Remix ~away-message by @jdan to create your own nostalgic AIM away message profile, and it was written with one of our faves, 98.css, also created by @jdan.

It’s still a little chilly at night, here’s a ~quilt-generator to keep you warm, made by @csb324.

“Tis tea time” according to @jrwren, who made ~tis-tea-time so you can keep track of what kinds are in your pantry, using localstorage.

If you like making patterns, ~pattern-preview by @ellell is a neat little that shows you what the pattern is as you draw the tile.

~veg-calc is a very cute and remixable tax calculator by @kvcarido.

Since April has come and gone that means it has officially been one year of ~multiuser-sketchpad by @mrdoob, one of the most viral Glitch apps ever! Take a stroll down memory lane back to the beginnings of quarantine, and watch the time lapse of everyone drawing together. If you have Glitch projects you built or love and want us to feature, share them on the forum, tweet them to us @glitch or email community@glitch.com - You may just end up in our next roundup! ✨

The project featured in this post’s header image is ~bison-namer, created by @laurenbiron and steph. The Fermi National Accelerator Laboratory has bison babies to name, so they created this fun tool. 🦬

Last month on Glitch, the April 2021 edition

We’re excited to announce some new updates that will have you building even faster with new starter apps, support for generated static sites, and a clean new look that makes the Glitch experience faster and fresher than ever.  

Get from idea to “Hello World” in seconds with our new lineup of starter apps, along with new and improved support for generated static sites

We’ve created new, fresh and fast starter apps to get you building websites and Node apps in seconds. In addition to a refresh of our static website and full-stack Node app starters, we’re improving our FREE static sites to support generated static sites, too! This was something our community has been asking for, so we’re excited to give you the benefits of fast and free static sites with the power to configure how your sites are built. 

Try it out by remixing our brand new React and Eleventy starters or updating your app’s package.json file. 

We picked a powerful set of tools to help you create full-featured apps on Glitch. 

There’s so much anxiety about which JS framework or build tool to pick, so we made some really good default choices for you. Our new Node starter now uses Fastify to give you a faster, extendable developer experience when writing Node. We chose React and Eleventy for their versatility, documentation and the wealth of developer content created by their communities. And we harness the powers of Vite to further improve the development and build experience in our React starter. 

You get all of the benefits of these tools without having to do any setup. But if you do want to configure your app or use other tools, go for it! Glitch won’t lock you into the platform or abstract away the code that is powering your idea. Don’t forget the rewind feature is always there if you need to backtrack—mistakes are welcome and encouraged!

Build a web app in less than a minute on Glitch.com

Syntax highlighting support for more file types

With this new update we’ve added support for syntax highlighting to make your code as clear and concise as possible. Open your Glitch editor to see syntax highlighting in action for the following file types:

These updates can help you go from idea to app in seconds, or serve as an introduction to a whole new world of frameworks. Don’t see your favorite framework listed right now? Our community is already collaborating to make the next wave of super-easy starters for Glitch. Join them and let us know what you want to see next.

Our newly updated “Create Project” page is available for everyone now, featuring our new official starters as well as Github import. Watch this space for more useful starter apps, as well as projects curated from and by our community!

There’s always something new to inspire you at Glitch

Whether you’re just beginning to experiment with Glitch or a remixer extraordinaire, we are excited to introduce—or reintroduce—what Glitch is all about to everyone. Yes, you can use Glitch to go from idea to site in seconds, but not just any site: a reliable, performant, accessible site (or app!), backed by some of the most powerful tools on the web. These updates and features are the result of a lot of careful consideration for our amazing community of explorers, dreamers, and builders, resulting in a Glitch that is faster and fresher than ever. 

If you have any fun or interesting projects you’re building using our new starters, feel free to tag us on Twitter, share in our support forum gallery, or email community@glitch.com so we can share with the community! In the meantime we’ll be hard at work making the Glitch experience the most reliable, intuitive, and friendly place to build the web. ✨

Take your apps to the next level with a Pro account

Glitch is the fastest way to go from code to deploy. You can build anything from small static websites to complex full-stack apps for free! All Glitch users get our powerful and collaborative in-browser editor, with Github import/export and Prettier support. Static sites come with free always-on hosting; full-stack apps sleep to save resources but wake on demand. Upgrade to a Pro account to get all of that and more: access controls, private projects, and the ability to Boost 5 full-stack apps for more disk space, memory, and always-on status. Check out our pricing page to learn more and subscribe!

Get a React or Eleventy app up and running in under a minute with the fastest, most powerful upgrade to Glitch ever. Now, it’s quicker to build a real website on Glitch than with a no-code tool.

Remix a whole new Glitch

There are at least a million ways you can use Glitch, and here are 30 ways we’ve seen your favorite companies, communities, and organizations build with Glitch. 

When we set out to create a way to enable people to get their cool idea spun into internet reality in a matter of seconds, there was no way to predict how folks would take Glitch and make it their own. While we try to keep the Glitch community updated on all of the amazing apps we come across, we also want to share a broader glimpse into who is embracing Glitch and how.

Some apps you’ll recognize, others might surprise you

The team behind everyone’s favorite workplace communication hub, Slack has been using Glitch for quite a while. From a place to spin up quick demos, to a portal for multiple workshop materials, to sample starters for their framework Bolt, the Slack team has embraced the many uses of Glitch. They aren’t alone—in fact, another popular communication application you might have heard of ~~Twitter~~ famously built a demo of their API late last year on Glitch. One of their UI engineers liked Glitch so much that they used it to build an Eleventy site. 

Speaking of visualization, John Keefe of the New York Times wrote about his work in visualizing COVID-19 cases in Congress and shared the above demo on Glitch of the final results. 

Teams from Postman, Microsoft, and Vonage also used Glitch to host internal resources like this self-service learning platform Postman launched using Glitch as the backends of their API training workspace, which is a self-serve learning platform they just launched! Tomomi Imura at Microsoft created a tutorial series on developing for Microsoft Teams using Glitch throughout for the coding exercises. 

Dwane Hemmings from the Communications API folks at Vonage posted a tutorial on using Web Components in a React app on Glitch, as part of a series and Garann Means has been posting cool videos showing how to get set up on Glitch to build with the Vonage API.  

Using a browser to read this? Count their teams as fans, too

By giving developers the tools to easily set up a demo, Glitch has enabled the teams behind some of your favorite browsers to make them even better! Google Chrome used Glitch to show a demo of the web serial API during the Chrome 89 release, and shared many similar apps during 2020’s Google Chrome Dev Summit. In Mozilla’s MDN Web Docs, they point to Glitch as a way to test out the  Element.requestFullscreen()function—or remix it! 

You too can use Glitch to try out or test new browser capabilities, just like the teams behind the browsers themselves do.

As recently as earlier this month Microsoft pointed users to try out the new CORS error reports with ~cors-errors in their latest doc on what's new in Edge DevTools. When it comes to standards work, we joined DuckDuckGo and many other major industry leaders in the call for a Global Privacy Control standard and implemented it in their suite of privacy browsers, which you can test at ~global-privacy-control.

You too can use Glitch to try out or test new browser capabilities, just like the teams behind the browsers themselves do. 

Empowering developers with tutorials, tools, and documentation

Browser teams are not the only ones who have caught on to the powerful set of tools Glitch provides software teams. Three use cases we frequently see hosted on Glitch are hands-on tutorials, developer tooling, and approachable documentation. 

As we recently shared, the AMP team used Glitch over the pandemic to create and share their series of online workshops with beginners. Speaking of beginners, we created Glitch with them in mind, not only to help folks get a site started in seconds but by introducing the rewind feature to help beginners and professionals alike, take a step back when they need to. Evelyn from Canada Learning Code wrote this great post about her journey of learning how to code and building her first site on Glitch. Here’s a Twitter thread we love of Corin Faife of Witness.org talking about using Glitch to teach his coworkers an intro to HTML workshop and how they now have their own personal sites!

Tammy Butow of Gremlin created this cool coding workshop using Glitch for GirlGeekAcademy’s She Hacks hackathon. This web.dev tutorial on making custom bullet points using CSS from Google is a fantastic example of how Glitch can transform the average tutorial into a hands-on experience.

~pouchdb-bug-helper makes it easier for developers to create reproducible bug reports for PouchDB.

One of the most popular uses of Glitch we see out in the wild has to be for demos and dev tools. The PouchDB team created ~pouchdb-bug-helper to enhance the bug reporting experience for their users by making it easier for them to submit reproducible test cases. It’s linked directly in their repo README and is one of several ways maintainers can get great use out of Glitch! Team STEP is an indie collective of game developers, musicians, 3d artists, and illustrators, and one of its members built this CLI tool for pushing local files to Glitch. Their README is pretty thorough and they wrote their reasoning behind it on the forum.

Jenny Brennan of the Ada Lovelace Institute built this tool ~hashflag for testing out hashflags (those emoji in Twitter hashtags) to use when they were designing the #AdaLovelaceDay hashflag. Read more about the tool and the cool process on Jenny’s blog. The Tableau team also put together this demo showcasing how to create a Web Data Connector from start to finish. Keisha, the dev in the video, won Tableau’s internal hackathon using Glitch earlier this year!

There are so many intriguing and innovative Glitch sites and apps that inspire surprise and delight that listing them all in one place would take away from the time you could spend exploring and tinkering with them. But don’t take our word for it, check out the gallery where the Glitch community shares their works of art! Or, better yet, try Glitch for yourself.  And if you're working with a larger team, or need custom billing or priority support, we've got you. Contact us for pricing.

Top 30 ways companies are using Glitch

It’s an all-too-familiar scenario for most of us. One day you’re looking at a calendar chock full of upcoming events and plans, and then BAM! A global pandemic hits, canceling everything in sight for the foreseeable future. But what to do if you’re an online educator and devrel professional trying to bring new devs to the web in various locales? This was the exact plight Ben Morss, Developer Advocate for Google faced last year when COVID-19 struck. We chatted with him about how he was able to face this situation head-on, how Glitch helped take his team global, and some of the challenges of being an online educator. 

Can you provide an overview of the coding workshops you’ve run, or are running? Who do you work with on your team to make them happen and who participates?

In 2019, Rob Ocel at ThisDot and I created a set of three free courses on AMP. We designed them not just to help experienced web developers get started with AMP, but also to help aspiring web developers get started. After all, AMP lets people create interactive websites without writing JavaScript (though you can), and we felt this made it a nice entry point for newcomers.

Running live web coding classes over the years, I learned that starting up a web server presents a significant obstacle. Also, for these courses, we wanted to give students starter code, mostly so they wouldn’t need to write their own CSS. Thus, we decided to incorporate an online coding environment into the courses. Other Googlers were already using Glitch for web.dev. Glitch was cute, simple to get started with, and it made it quick and easy for people to copy a starter project. Rob and I decided it would be perfect for the AMP courses!

We published the courses on amp.dev. We also created decks and videos and made the training materials available to anyone. But we also wanted to make them available to meetups. So we compressed the first course into a two-hour workshop. And we encouraged training programs and boot camps, Google Developer Groups, Developer Student Clubs, and everyone else to run this workshop.

Meanwhile, I was organizing and running a series of AMP mini-conferences around the world. In 2020, I planned to focus exclusively on developing markets. Local contacts helped me set up a three-city trip to Pakistan, an event in Sri Lanka, and another in Bangladesh, all in March and April. I couldn’t wait to get started!

Then, COVID-19 happened. We had to cancel all of our events. How could we reach developers now?

After a period of mourning and confusion, I set up a couple of virtual workshops. We were pleasantly surprised to discover that these could be quite effective. Glitch was a key element here. Not only could students easily find our starter code and start working without having to start up a web server—but everyone’s projects were public by default as well. As people completed exercises, I’d ask them to share their Glitch URLs with me. I could then load those up on my computer and show them to the group. This provided a much-needed social element. And when people had trouble, they could still share their Glitch URL, and I could help them debug.

In 2020, we ran about twenty of these virtual workshops.

~nice-consonant is an app that represents most of the work done in the AMP courses Morss facilitates.

How does an international coding workshop differ from a program that’s just confined to the US? 

Our events centered in the US and our events centered elsewhere were very similar. One wonderful thing about the developer community is that it’s so international. A web developer in Australia often works with similar tools and similar problems as a web developer in Colombia. As long as everyone can understand the same language, they can use the same content. Of course, there are differences and exceptions, but to me, the remarkable thing is how much programmers around the world have in common.

I noticed early on that a workshop put on by a group in one country would attract people from other places as well. I remember that a workshop put on by GDG Nuremberg also brought in students from places like India and Brazil. Which was spectacular.

We’d love to know how you structure the actual workshop. Can you share any of the materials or apps that you built?

For each of our three courses, we made one Glitch with the starter code and another Glitch with what the student should have at the end. Each course contained a series of exercises, each of which built on the previous work, so we also made Glitches for each intermediate step.

For the workshop, I included 5 discrete tasks. Each involves adding features to a simple webpage, and as the student completes them they build the page. They start with something very simple—modifying an image so that it uses <amp-img> instead of the standard HTML <img>. Then, they add an attribute to make that image responsive. Soon they’re adding an image carousel, social sharing links, and a menu. Within ninety minutes, they’ve learned how to use AMP components to create a basic interactive webpage! It can be quite empowering.

As long as everyone can understand the same language, they can use the same content.

How do these workshops help you achieve your team’s goals? How do you measure success? 

Even though our international mini-conferences were thrilling, the workshops have been much more efficient. Our live events included a workshop portion, but it was hard to keep it going in a large room full of potentially restless people, not all of whom were developers or who’d brought along a laptop. Sometimes we didn’t have enough power strips or reliable WiFi. And, of course, to run an event in the physical world, we had to find a venue, secure catering, reach out to developers to come spend a day with us, and convince a set of volunteers to fly across the world. Live events were a wonderful adventure, but they also involved substantial time and expense. For the virtual events, I simply reached out to developers who ran an existing meetup. When the time came to do the workshop, I’d just walk up to my office and fire up my computer.

Of course, I really miss the communities we discovered through live events. But some groups have successfully built community through virtual workshops. Last May, eight different groups from across North America, from Memphis to Winnipeg and Houston, all collaborated on a workshop. It became quite the social occasion!

We ran live events for a few reasons, but quite possibly the two most important were exposing developers to AMP and getting their feedback. These virtual workshops help us continue to accomplish the first goal: participants get to make their first AMP site. Interestingly we tend to reach a lot more beginners and less experienced developers, so they become more of an educational event, a chance for newbies to get their feet wet.

To help measure success (or failure), I usually ask participants to fill out a survey at the end. To incentivize people to take the trouble to fill it out, when possible we raffle off a small prize. Taken together, the survey results are about as high as I’ve ever seen for any event I’ve ever been involved with. Go Glitch!

Has anything in your workflow changed as a result of COVID-19? What’s different and how have you adjusted? 

For a Developer Advocate, well, yes, pretty much everything changed. :) One week I was planning events in five cities, scheduling my own trip to Pakistan, and working on a talk for Google I/O. The next week, my main projects vanished. I had to start again.

A year later, I’m accustomed to the new life that many of us are living—working from home, cooking and cleaning more, taking care of kids, and learning new skills, like how to snake out a clogged shower drain. I still feel highly privileged and incredibly fortunate. I still have a job, no one in my immediate family has caught COVID, and we are fortunate enough to be able to stay home. (This would have been much harder if I’d stayed in my previous career, as a musician.) We’re also fortunate that the extended family time has brought us closer together. But as I thrive on social interactions and the novelty of moving from place to place, I do still find this new life difficult. On the other hand, I’ve also had time to start coding more. Recently I even re-learned C in order to add support for AVIF to libgd.

For educators and dev rel professionals thinking about using Glitch to reach learners, what are some of your pro tips or lessons learned the hard way? 

I really believe in workshops instead of talks, especially for online events. They help involve everyone. Start off with something easy. Make it fun, encourage people to chat, encourage them to stay involved.

When doing this workshop, I always compress the part where I just talk to people. I’m pretty sure that after five minutes of me talking, most people watching me on their computer screens will have tuned out. I try to replace this talking time with discussion and with coding. Let people be active. Give them the space to learn!

Thanks to Ben for sharing his experience and wisdom in guiding international workshops and how Glitch was able to empower web devs in the making. If you build or see an app on Glitch that you want us to feature, we’d love to know! Email community@glitch.com or tweet @glitch!

It’s an all-too-familiar scenario for most of us. One day you’re looking at a calendar chock full of upcoming events and plans, and then BAM! A global pandemic hits, canceling everything in sight for the foreseeable future. But what to do if you’re an online educator and devrel professional trying to bring new devs to the web in various locales? This was the exact plight Ben Morss, Developer Advocate for Google faced last year when COVID-19 struck. We chatted with him about how he was able to face this situation head-on, how Glitch helped take his team global, and some of the challenges of being an online educator.

Going global with Glitch: a Q+A with AMP educator Ben Morss

He also serves on the boards of Stack Overflow and the Data & Society Research Institute, and was formerly a contributing editor of WIRED. He’s been blogging since 1999 and won’t stop telling people about that one time he was on the Desus and Mero late-night show.