Why I Built a Simple CodePen Alternative For K-12 Classrooms (And How You Can Too)
The bell rang last October, and most of my 8th grade coding class grabbed their backpacks and bolted for the bus. Only Javi stayed, slouched in his chair, his half-eaten bag of cheddar Goldfish spilling crumbs across his desk. His Chromebook was open to a 404 error page from the district’s web filter. “I spent my entire lunch making this animation of my dog chasing a laser,” he said, clicking the refresh button again. “CodePen’s blocked. Now I can’t show anyone for the tech showcase next week.”
I’d seen this same story half a dozen times that semester. Our district blocks most public coding sites, because they host unmoderated user content and get lumped into “social networking” categories that are off-limits for student accounts. The coding platform the district pays for works great for step-by-step lessons, but it’s built for turning in assignments, not messing around. If a kid wants to mess with a new CSS trick or make a silly little game to share with their friends, they can’t do it there.
I’ve dabbled in web development on weekends for years, mostly building silly little tools for my own kids’ scout troop and small projects for the PTA. That night, over burnt microwave popcorn at my kitchen table, I thought: why not build a simple, school-only version of CodePen? It didn’t need all the fancy features the real site has. It just needed to let kids write HTML, CSS, and JavaScript, see a live preview, and share links with other people in the school.
My 10-year-old daughter was spread out on the other end of the table drawing unicorns, and she kept leaning over to ask if I could add a rainbow theme. I told her I’d think about it. I ended up adding light and dark mode, skipped the rainbow to keep the code light for our district’s 5-year-old Chromebooks, which struggle with anything heavier than Google Docs.
I cut almost every extra feature I didn’t need. The real CodePen lets anyone on the internet see your work, comment, and copy your code to tweak it. I didn’t need any of that for our school. All logins are through our school’s existing Google Workspace account, so no new passwords for anyone to remember. No outside visitors can see any projects. That checks every box the district’s edtech team has: no unmoderated public content, no safety risks, so it’s not going to get blocked.
After two weekends of work, I invited my two coding classes to test it out. The first week, a 7th grader posted a project that was just a meme of our principal with a silly caption. I got an email from the office 20 minutes later asking what the site was. I went in, took the project down, talked to the kid about what’s appropriate for school, and added a one-click flag button that lets any teacher or student report content for review. That was an easy fix, and we haven’t had a problem since. Kids actually police each other more than I do now, because they want the site to stay open.
Last November, at parent-teacher conferences, Javi’s mom pulled me aside after our 10 minutes. She said he’d been coming home every night for two weeks working on that dog animation, adding new features, and she didn’t get why it mattered that much. “He’s not getting a grade for it, right?” she asked. That’s when I started thinking about what this little site actually does that the big fancy paid platforms don’t.
I told her that most of the coding we do in class is graded, step-by-step. Kids follow instructions to make a button change color, or a to-do list app that works a certain way. That’s important for learning the basics, but it’s not how people actually get good at coding. People get good by messing around, by making something silly for their friend, by copying a trick they saw someone else use and tweaking it to make it their own. The real CodePen got popular because it’s a playground, not a classroom. We just needed a playground that was safe for our school to use.
If you’re a teacher who’s dealt with this same problem, or a parent whose kid likes to code and can’t access CodePen through school, there are a few low-effort ways to get this going. I didn’t build the whole thing from scratch— I used a free open-source code editor component called CodeMirror that does 90% of the work for you. Hosting it for our 300-student school costs me $5 a month on a basic virtual server, which I pay out of my classroom supply budget. If you don’t code at all, you can ask your district’s edtech team to whitelist CodePen’s education-specific portal, which only allows school-approved content and is already designed to be student-safe. If that doesn’t work, a low-tech fix is just setting up a shared Google Drive folder where kids can upload their HTML files and share links with each other. It’s not as pretty, but it works for small groups.
What I’ve learned after six months of running this is that we don’t need fancy, expensive tools to get kids experimenting. I cut every feature that wasn’t absolutely necessary: no fancy user profiles, no ads, no tracking analytics, no gradebook integration that we don’t need. It’s just a blank space to write code and see what happens. Right now, we have 192 projects posted. Some are half-broken buttons that don’t do anything. Some are full-on games kids made for their little siblings. One kid made a quiz that tells you what kind of school lunch you are, and it’s been shared by almost every kid in 8th grade.
We still have a ton of problems. The preview window still doesn’t load right on old iPads, I get bug reports from kids on Sunday evenings that I don’t get to until Monday, and I still haven’t figured out how to let kids from other district schools access it without overwhelming my tiny server. Last month, the filter almost flagged it because of a mislabeled content category, and I had to walk the edtech team through what it is to get it unblocked. It’s not perfect.
But last week, Javi showed that dog animation in the school talent show. When the laser moved across the screen and his dog chased it off the edge, the whole gym laughed. He got third place, and when he came off stage he told me he already started working on a new animation for next year. That’s the part no paid coding platform I’ve used has ever managed to pull off: getting kids excited to make something just because they can. I’m still fixing bugs, and it’ll probably never be done, but for right now, that’s enough.
Please indicate: Thinking In Educating » Why I Built a Simple CodePen Alternative For K-12 Classrooms (And How You Can Too)