Alternatives to CodePen logo

Alternatives to CodePen

GitHub, CodeSandbox, Codeanywhere, JSFiddle, and Atom are the most popular alternatives and competitors to CodePen.
154
224
+ 1
0

What is CodePen and what are its top alternatives?

It is a social development environment for front-end designers and developers.. It functions as an online code editor and open-source learning environment, where developers can create code snippets, creatively named "pens", and test them.
CodePen is a tool in the Text Editor category of a tech stack.

Top Alternatives to CodePen

  • GitHub
    GitHub

    GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Over three million people use GitHub to build amazing things together. ...

  • CodeSandbox
    CodeSandbox

    CodeSandbox allows developers to simply go to a URL in their browser to start building. This not only makes it easier to get started, it also makes it easier to share. You can just share your created work by sharing the URL, others can then (without downloading) further develop on these sandboxes. ...

  • Codeanywhere
    Codeanywhere

    A development platform that enables you to not only edit your files from underlying services like FTP, GitHub, Dropbox and the like, but on top of that gives you the ability to collaborate, embed and share through Codeanywhere on any device. ...

  • JSFiddle
    JSFiddle

    It is an online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as 'fiddles'. It allows for simulated AJAX calls. ...

  • Atom
    Atom

    At GitHub, we're building the text editor we've always wanted. A tool you can customize to do anything, but also use productively on the first day without ever touching a config file. Atom is modern, approachable, and hackable to the core. We can't wait to see what you build with it. ...

  • StackBlitz
    StackBlitz

    StackBlitz is the browser-based IDE that eliminates time-consuming local configuration and lets you spend 
more time coding. Develop with Next.js, React, Angular, Vite, and more in a Node.js development environment entirely in your browser ...

  • Glitch
    Glitch

    Combining automated deployment, instant hosting and collaborative editing, Gomix gets you straight to coding. The apps you create are instantly live, hosted by us, and always up to date with your latest changes. Build products, prototype ideas, and hack solutions to problems. ...

  • Visual Studio Code
    Visual Studio Code

    Build and debug modern web and cloud applications. Code is free and available on your favorite platform - Linux, Mac OSX, and Windows. ...

CodePen alternatives & related posts

GitHub logo

GitHub

277.6K
241.4K
10.3K
Powerful collaboration, review, and code management for open source and private development projects
277.6K
241.4K
+ 1
10.3K
PROS OF GITHUB
  • 1.8K
    Open source friendly
  • 1.5K
    Easy source control
  • 1.3K
    Nice UI
  • 1.1K
    Great for team collaboration
  • 867
    Easy setup
  • 504
    Issue tracker
  • 486
    Great community
  • 482
    Remote team collaboration
  • 451
    Great way to share
  • 442
    Pull request and features planning
  • 147
    Just works
  • 132
    Integrated in many tools
  • 121
    Free Public Repos
  • 116
    Github Gists
  • 112
    Github pages
  • 83
    Easy to find repos
  • 62
    Open source
  • 60
    It's free
  • 60
    Easy to find projects
  • 56
    Network effect
  • 49
    Extensive API
  • 43
    Organizations
  • 42
    Branching
  • 34
    Developer Profiles
  • 32
    Git Powered Wikis
  • 30
    Great for collaboration
  • 24
    It's fun
  • 23
    Clean interface and good integrations
  • 22
    Community SDK involvement
  • 20
    Learn from others source code
  • 16
    Because: Git
  • 14
    It integrates directly with Azure
  • 10
    Newsfeed
  • 10
    Standard in Open Source collab
  • 8
    Fast
  • 8
    It integrates directly with Hipchat
  • 8
    Beautiful user experience
  • 7
    Easy to discover new code libraries
  • 6
    Smooth integration
  • 6
    Cloud SCM
  • 6
    Nice API
  • 6
    Graphs
  • 6
    Integrations
  • 6
    It's awesome
  • 5
    Quick Onboarding
  • 5
    Remarkable uptime
  • 5
    CI Integration
  • 5
    Hands down best online Git service available
  • 5
    Reliable
  • 4
    Free HTML hosting
  • 4
    Version Control
  • 4
    Simple but powerful
  • 4
    Unlimited Public Repos at no cost
  • 4
    Security options
  • 4
    Loved by developers
  • 4
    Uses GIT
  • 4
    Easy to use and collaborate with others
  • 3
    IAM
  • 3
    Nice to use
  • 3
    Ci
  • 3
    Easy deployment via SSH
  • 2
    Good tools support
  • 2
    Leads the copycats
  • 2
    Free private repos
  • 2
    Free HTML hostings
  • 2
    Easy and efficient maintainance of the projects
  • 2
    Beautiful
  • 2
    Never dethroned
  • 2
    IAM integration
  • 2
    Very Easy to Use
  • 2
    Easy to use
  • 2
    All in one development service
  • 2
    Self Hosted
  • 2
    Issues tracker
  • 2
    Easy source control and everything is backed up
  • 1
    Profound
CONS OF GITHUB
  • 53
    Owned by micrcosoft
  • 37
    Expensive for lone developers that want private repos
  • 15
    Relatively slow product/feature release cadence
  • 10
    API scoping could be better
  • 8
    Only 3 collaborators for private repos
  • 3
    Limited featureset for issue management
  • 2
    GitHub Packages does not support SNAPSHOT versions
  • 2
    Does not have a graph for showing history like git lens
  • 1
    No multilingual interface
  • 1
    Takes a long time to commit
  • 1
    Expensive

related GitHub posts

Johnny Bell

I was building a personal project that I needed to store items in a real time database. I am more comfortable with my Frontend skills than my backend so I didn't want to spend time building out anything in Ruby or Go.

I stumbled on Firebase by #Google, and it was really all I needed. It had realtime data, an area for storing file uploads and best of all for the amount of data I needed it was free!

I built out my application using tools I was familiar with, React for the framework, Redux.js to manage my state across components, and styled-components for the styling.

Now as this was a project I was just working on in my free time for fun I didn't really want to pay for hosting. I did some research and I found Netlify. I had actually seen them at #ReactRally the year before and deployed a Gatsby site to Netlify already.

Netlify was very easy to setup and link to my GitHub account you select a repo and pretty much with very little configuration you have a live site that will deploy every time you push to master.

With the selection of these tools I was able to build out my application, connect it to a realtime database, and deploy to a live environment all with $0 spent.

If you're looking to build out a small app I suggest giving these tools a go as you can get your idea out into the real world for absolutely no cost.

See more
Simon Reymann
Senior Fullstack Developer at QUANTUSflow Software GmbH · | 30 upvotes · 8.9M views

Our whole DevOps stack consists of the following tools:

  • GitHub (incl. GitHub Pages/Markdown for Documentation, GettingStarted and HowTo's) for collaborative review and code management tool
  • Respectively Git as revision control system
  • SourceTree as Git GUI
  • Visual Studio Code as IDE
  • CircleCI for continuous integration (automatize development process)
  • Prettier / TSLint / ESLint as code linter
  • SonarQube as quality gate
  • Docker as container management (incl. Docker Compose for multi-container application management)
  • VirtualBox for operating system simulation tests
  • Kubernetes as cluster management for docker containers
  • Heroku for deploying in test environments
  • nginx as web server (preferably used as facade server in production environment)
  • SSLMate (using OpenSSL) for certificate management
  • Amazon EC2 (incl. Amazon S3) for deploying in stage (production-like) and production environments
  • PostgreSQL as preferred database system
  • Redis as preferred in-memory database/store (great for caching)

The main reason we have chosen Kubernetes over Docker Swarm is related to the following artifacts:

  • Key features: Easy and flexible installation, Clear dashboard, Great scaling operations, Monitoring is an integral part, Great load balancing concepts, Monitors the condition and ensures compensation in the event of failure.
  • Applications: An application can be deployed using a combination of pods, deployments, and services (or micro-services).
  • Functionality: Kubernetes as a complex installation and setup process, but it not as limited as Docker Swarm.
  • Monitoring: It supports multiple versions of logging and monitoring when the services are deployed within the cluster (Elasticsearch/Kibana (ELK), Heapster/Grafana, Sysdig cloud integration).
  • Scalability: All-in-one framework for distributed systems.
  • Other Benefits: Kubernetes is backed by the Cloud Native Computing Foundation (CNCF), huge community among container orchestration tools, it is an open source and modular tool that works with any OS.
See more
CodeSandbox logo

CodeSandbox

98
287
25
Online playground for React
98
287
+ 1
25
PROS OF CODESANDBOX
  • 9
    Awesome way to fun kickstart your ReactJS apps
  • 7
    Online vs-code editor look and feel to start react
  • 5
    Is open-source
  • 4
    Easiest way to showcase
CONS OF CODESANDBOX
  • 4
    250 module limit
  • 1
    Hard to use the console

related CodeSandbox posts

Codeanywhere logo

Codeanywhere

102
239
121
Online code editor, available on iOS, Android and more. Integrates with GitHub and Dropbox
102
239
+ 1
121
PROS OF CODEANYWHERE
  • 17
    Sleek interface
  • 16
    3rd party integration
  • 13
    Easy to use
  • 11
    Web IDE
  • 9
    FTP support
  • 9
    Fast loading
  • 7
    Emmet
  • 5
    SSH Connections for free
  • 5
    Anywhere coding
  • 5
    Full root access
  • 4
    GitHub integration
  • 4
    Preconfigured development stacks
  • 4
    SFTP support
  • 4
    Private use for free
  • 3
    Easy setup
  • 2
    Amazon S3 Integration
  • 2
    Easy Setup, Containers
  • 1
    Code directly by FTP
CONS OF CODEANYWHERE
    Be the first to leave a con

    related Codeanywhere posts

    JSFiddle logo

    JSFiddle

    44
    80
    0
    An online code editor
    44
    80
    + 1
    0
    PROS OF JSFIDDLE
      Be the first to leave a pro
      CONS OF JSFIDDLE
      • 2
        Can't login with third-party app account

      related JSFiddle posts

      Atom logo

      Atom

      16.7K
      14.3K
      2.7K
      A hackable text editor for the 21st Century
      16.7K
      14.3K
      + 1
      2.7K
      PROS OF ATOM
      • 529
        Free
      • 449
        Open source
      • 343
        Modular design
      • 321
        Hackable
      • 316
        Beautiful UI
      • 170
        Github integration
      • 147
        Backed by github
      • 119
        Built with node.js
      • 113
        Web native
      • 107
        Community
      • 35
        Packages
      • 18
        Cross platform
      • 5
        Multicursor support
      • 5
        Nice UI
      • 5
        TypeScript editor
      • 3
        Snippets
      • 3
        Simple but powerful
      • 3
        Open source, lots of packages, and so configurable
      • 3
        cli start
      • 3
        Chrome Inspector works IN EDITOR
      • 2
        Awesome
      • 2
        Smart TypeScript code completion
      • 2
        Well documented
      • 2
        It's powerful
      • 2
        Code readability
      • 1
        works with GitLab
      • 1
        User friendly
      • 1
        full support
      • 1
        vim support
      • 1
        Split-Tab Layout
      • 1
        "Free", "Hackable", "Open Source", The Awesomness
      • 1
        Apm publish minor
      • 1
        Hackable and Open Source
      • 1
        Consistent UI on all platforms
      • 0
        Publish
      CONS OF ATOM
      • 19
        Slow with large files
      • 7
        Slow startup
      • 2
        Most of the time packages are hard to find.
      • 1
        No longer maintained
      • 1
        Cannot Run code with F5
      • 1
        Can be easily Modified

      related Atom posts

      Jerome Dalbert
      Principal Backend Software Engineer at StackShare · | 13 upvotes · 890.9K views

      I liked Sublime Text for its speed, simplicity and keyboard shortcuts which synergize well when working on scripting languages like Ruby and JavaScript. I extended the editor with custom Python scripts that improved keyboard navigability such as autofocusing the sidebar when no files are open, or changing tab closing behavior.

      But customization can only get you so far, and there were little things that I still had to use the mouse for, such as scrolling, repositioning lines on the screen, selecting the line number of a failing test stack trace from a separate plugin pane, etc. After 3 years of wearily moving my arm and hand to perform the same repetitive tasks, I decided to switch to Vim for 3 reasons:

      • your fingers literally don’t ever need to leave the keyboard home row (I had to remap the escape key though)
      • it is a reliable tool that has been around for more than 30 years and will still be around for the next 30 years
      • I wanted to "look like a hacker" by doing everything inside my terminal and by becoming a better Unix citizen

      The learning curve is very steep and it took me a year to master it, but investing time to be truly comfortable with my #TextEditor was more than worth it. To me, Vim comes close to being the perfect editor and I probably won’t need to switch ever again. It feels good to ignore new editors that come out every few years, like Atom and Visual Studio Code.

      See more
      Julian Sanchez
      Lead Developer at Chore Champion · | 9 upvotes · 768K views

      We use Visual Studio Code because it allows us to easily and quickly integrate with Git, much like Sublime Merge ,but it is integrated into the IDE. Another cool part about VS Code is the ability collaborate with each other with Visual Studio Live Share which allows our whole team to get more done together. It brings the convenience of the Google Suite to programming, offering something that works more smoothly than anything found on Atom or Sublime Text

      See more
      StackBlitz logo

      StackBlitz

      73
      256
      16
      StackBlitz is the only truly browser-based IDE for web development
      73
      256
      + 1
      16
      PROS OF STACKBLITZ
      • 8
        It just works
      • 4
        Fast loading
      • 3
        Can sign-in with third-party account. E.g. Github
      • 1
        Full terminal
      CONS OF STACKBLITZ
      • 1
        Cannot upload Images
      • 1
        Not able to upload Images
      • 1
        Only support projects scaffolded with @angular/cli

      related StackBlitz posts

      Glitch logo

      Glitch

      83
      175
      42
      Code, collaborate, and ship in seconds from your browser
      83
      175
      + 1
      42
      PROS OF GLITCH
      • 12
        Bang! App built
      • 9
        Instant APPification ;)
      • 7
        Auto commits
      • 4
        No no. limitation on free projects
      • 3
        Easy to use
      • 2
        Tons of usable code
      • 2
        Awesome support
      • 2
        Very fast API creation. Especially for small apps
      • 1
        Github Integration
      CONS OF GLITCH
      • 5
        UI could be better / cleaner
      • 2
        Limited Support/Diffficult to use Non-JS Languages
      • 1
        Automatically suspends proxies
      • 1
        Not good for big projects
      • 1
        Cannot delete project, only the source code is

      related Glitch posts

      Visual Studio Code logo

      Visual Studio Code

      174.2K
      157K
      2.3K
      Build and debug modern web and cloud applications, by Microsoft
      174.2K
      157K
      + 1
      2.3K
      PROS OF VISUAL STUDIO CODE
      • 339
        Powerful multilanguage IDE
      • 308
        Fast
      • 193
        Front-end develop out of the box
      • 158
        Support TypeScript IntelliSense
      • 142
        Very basic but free
      • 126
        Git integration
      • 106
        Intellisense
      • 78
        Faster than Atom
      • 53
        Better ui, easy plugins, and nice git integration
      • 45
        Great Refactoring Tools
      • 44
        Good Plugins
      • 42
        Terminal
      • 38
        Superb markdown support
      • 36
        Open Source
      • 34
        Extensions
      • 26
        Large & up-to-date extension community
      • 26
        Awesome UI
      • 24
        Powerful and fast
      • 22
        Portable
      • 18
        Best editor
      • 18
        Best code editor
      • 17
        Easy to get started with
      • 15
        Lots of extensions
      • 15
        Built on Electron
      • 15
        Crossplatform
      • 15
        Good for begginers
      • 14
        Extensions for everything
      • 14
        Open, cross-platform, fast, monthly updates
      • 14
        All Languages Support
      • 13
        Easy to use and learn
      • 12
        Extensible
      • 12
        "fast, stable & easy to use"
      • 11
        Totally customizable
      • 11
        Git out of the box
      • 11
        Faster edit for slow computer
      • 11
        Ui design is great
      • 11
        Useful for begginer
      • 10
        Great community
      • 10
        SSH support
      • 10
        Fast Startup
      • 9
        It has terminal and there are lots of shortcuts in it
      • 9
        Powerful Debugger
      • 9
        Great language support
      • 9
        Works With Almost EveryThing You Need
      • 8
        Python extension is fast
      • 8
        Can compile and run .py files
      • 7
        Great document formater
      • 7
        Features rich
      • 6
        He is not Michael
      • 6
        Awesome multi cursor support
      • 6
        Extension Echosystem
      • 6
        She is not Rachel
      • 5
        Language server client
      • 5
        Easy azure
      • 5
        SFTP Workspace
      • 5
        VSCode.pro Course makes it easy to learn
      • 5
        Very proffesional
      • 4
        Supports lots of operating systems
      • 4
        Has better support and more extentions for debugging
      • 4
        Excellent as git difftool and mergetool
      • 4
        Virtualenv integration
      • 3
        Has more than enough languages for any developer
      • 3
        Better autocompletes than Atom
      • 3
        Emmet preinstalled
      • 3
        'batteries included'
      • 3
        More tools to integrate with vs
      • 2
        VS Code Server: Browser version of VS Code
      • 2
        Big extension marketplace
      • 2
        Customizable
      • 2
        Microsoft
      • 2
        Light
      • 2
        Fast and ruby is built right in
      • 2
        CMake support with autocomplete
      CONS OF VISUAL STUDIO CODE
      • 46
        Slow startup
      • 29
        Resource hog at times
      • 20
        Poor refactoring
      • 16
        Microsoft
      • 13
        Poor UI Designer
      • 11
        Weak Ui design tools
      • 10
        Poor autocomplete
      • 8
        Super Slow
      • 8
        Microsoft sends telemetry data
      • 7
        Poor in PHP
      • 7
        Huge cpu usage with few installed extension
      • 6
        It's MicroSoft
      • 3
        No built in live Preview
      • 3
        No Built in Browser Preview
      • 3
        Poor in Python
      • 3
        Electron
      • 3
        No color Intergrator
      • 3
        Very basic for java development and buggy at times
      • 2
        Powered by Electron
      • 2
        Bad Plugin Architecture
      • 1
        Terminal does not identify path vars sometimes
      • 1
        Slow C++ Language Server

      related Visual Studio Code posts

      Simon Reymann
      Senior Fullstack Developer at QUANTUSflow Software GmbH · | 30 upvotes · 8.9M views

      Our whole DevOps stack consists of the following tools:

      • GitHub (incl. GitHub Pages/Markdown for Documentation, GettingStarted and HowTo's) for collaborative review and code management tool
      • Respectively Git as revision control system
      • SourceTree as Git GUI
      • Visual Studio Code as IDE
      • CircleCI for continuous integration (automatize development process)
      • Prettier / TSLint / ESLint as code linter
      • SonarQube as quality gate
      • Docker as container management (incl. Docker Compose for multi-container application management)
      • VirtualBox for operating system simulation tests
      • Kubernetes as cluster management for docker containers
      • Heroku for deploying in test environments
      • nginx as web server (preferably used as facade server in production environment)
      • SSLMate (using OpenSSL) for certificate management
      • Amazon EC2 (incl. Amazon S3) for deploying in stage (production-like) and production environments
      • PostgreSQL as preferred database system
      • Redis as preferred in-memory database/store (great for caching)

      The main reason we have chosen Kubernetes over Docker Swarm is related to the following artifacts:

      • Key features: Easy and flexible installation, Clear dashboard, Great scaling operations, Monitoring is an integral part, Great load balancing concepts, Monitors the condition and ensures compensation in the event of failure.
      • Applications: An application can be deployed using a combination of pods, deployments, and services (or micro-services).
      • Functionality: Kubernetes as a complex installation and setup process, but it not as limited as Docker Swarm.
      • Monitoring: It supports multiple versions of logging and monitoring when the services are deployed within the cluster (Elasticsearch/Kibana (ELK), Heapster/Grafana, Sysdig cloud integration).
      • Scalability: All-in-one framework for distributed systems.
      • Other Benefits: Kubernetes is backed by the Cloud Native Computing Foundation (CNCF), huge community among container orchestration tools, it is an open source and modular tool that works with any OS.
      See more
      Johnny Bell

      I've been in the #frontend game for about 7 years now. I started coding in Sublime Text because all of the tutorials I was doing back then everyone was using it. I found the speed amazing compared to some other tools at the time. I kept using Sublime Text for about 4-5 years.

      I find Sublime Text lacks some functionality, after all it is just a text editor rather than a full fledged IDE. I finally converted over to PhpStorm as I was working with Magento and Magento as you know is mainly #PHP based.

      This was amazing all the features in PhpStorm I loved, the debugging features, and the control click feature when you click on a dependency or linked file it will take you to that file. It was great.

      PhpStorm is kind of slow, I found that Prettier was taking a long time to format my code, and it just was lagging a lot so I was looking for alternatives. After watching some more tutorial videos I noticed that everyone was using Visual Studio Code. So I gave it a go, and its amazing.

      It has support for everything I need with the plugins and the integration with Git is amazing. The speed of this IDE is blazing fast, and I wouldn't go back to using PhpStorm anymore. I highly recommend giving Visual Studio Code a try!

      See more