Alternatives to CodePen logo

Alternatives to CodePen

GitHub, CodeSandbox, Codeanywhere, JSFiddle, and Atom are the most popular alternatives and competitors to CodePen.
106
133
+ 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 an online IDE where you can create Angular & React projects that are immediately online & shareable via link… in just one click. 😮 It automatically takes care of installing dependencies, compiling, bundling, and hot reloading as you type. ...

  • 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

169.5K
136.5K
10.2K
Powerful collaboration, review, and code management for open source and private development projects
169.5K
136.5K
+ 1
10.2K
PROS OF GITHUB
  • 1.8K
    Open source friendly
  • 1.5K
    Easy source control
  • 1.2K
    Nice UI
  • 1.1K
    Great for team collaboration
  • 857
    Easy setup
  • 496
    Issue tracker
  • 478
    Great community
  • 475
    Remote team collaboration
  • 444
    Great way to share
  • 436
    Pull request and features planning
  • 139
    Just works
  • 125
    Integrated in many tools
  • 112
    Free Public Repos
  • 106
    Github Gists
  • 103
    Github pages
  • 81
    Easy to find repos
  • 60
    Open source
  • 58
    Easy to find projects
  • 56
    Network effect
  • 55
    It's free
  • 47
    Extensive API
  • 42
    Organizations
  • 41
    Branching
  • 33
    Developer Profiles
  • 32
    Git Powered Wikis
  • 29
    Great for collaboration
  • 23
    It's fun
  • 22
    Community SDK involvement
  • 21
    Clean interface and good integrations
  • 19
    Learn from others source code
  • 14
    It integrates directly with Azure
  • 14
    Because: Git
  • 13
    Wide acceptance
  • 10
    Large community
  • 9
    Newsfeed
  • 9
    Standard in Open Source collab
  • 8
    It integrates directly with Hipchat
  • 7
    Fast
  • 7
    Beautiful user experience
  • 6
    Cloud SCM
  • 6
    Easy to discover new code libraries
  • 5
    Smooth integration
  • 5
    Nice API
  • 5
    Graphs
  • 5
    Integrations
  • 5
    It's awesome
  • 4
    Hands down best online Git service available
  • 4
    Reliable
  • 4
    Remarkable uptime
  • 3
    Easy to use and collaborate with others
  • 3
    CI Integration
  • 3
    Free HTML hosting
  • 3
    Loved by developers
  • 3
    Quick Onboarding
  • 3
    Security options
  • 3
    Simple but powerful
  • 3
    Uses GIT
  • 3
    Unlimited Public Repos at no cost
  • 3
    Version Control
  • 2
    Nice to use
  • 1
    Free private repos
  • 1
    Easy deployment via SSH
  • 1
    Beautiful
  • 1
    Owned by micrcosoft
  • 1
    Free HTML hostings
  • 1
    Self Hosted
  • 1
    All in one development service
  • 1
    Easy to use
  • 1
    Good tools support
  • 1
    Easy source control and everything is backed up
  • 1
    Leads the copycats
  • 1
    Never dethroned
  • 1
    Ci
  • 1
    Issues tracker
  • 1
    Easy and efficient maintainance of the projects
  • 1
    IAM
  • 1
    IAM integration
  • 0
    Profound
  • 0
    1
CONS OF GITHUB
  • 45
    Owned by micrcosoft
  • 36
    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
  • 1
    Have to use a token for the package registry
  • 1
    No multilingual interface
  • 1
    Takes a long time to commit

related GitHub posts

Johnny Bell
Software Engineer at Weedmaps · | 77 upvotes · 1.1M views

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 · | 28 upvotes · 2.8M 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

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

related CodeSandbox posts

Codeanywhere logo

Codeanywhere

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

    related Codeanywhere posts

    JSFiddle logo

    JSFiddle

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

      related JSFiddle posts

      Atom logo

      Atom

      12.9K
      10.7K
      2.7K
      A hackable text editor for the 21st Century
      12.9K
      10.7K
      + 1
      2.7K
      PROS OF ATOM
      • 527
        Free
      • 445
        Open source
      • 342
        Modular design
      • 318
        Hackable
      • 316
        Beautiful UI
      • 170
        Github integration
      • 147
        Backed by github
      • 119
        Built with node.js
      • 113
        Web native
      • 107
        Community
      • 34
        Packages
      • 18
        Cross platform
      • 5
        Multicursor support
      • 5
        Nice UI
      • 5
        TypeScript editor
      • 3
        cli start
      • 3
        Simple but powerful
      • 3
        Open source, lots of packages, and so configurable
      • 3
        Chrome Inspector works IN EDITOR
      • 3
        Snippets
      • 2
        Awesome
      • 2
        Code readability
      • 2
        Smart TypeScript code completion
      • 2
        It's powerful
      • 2
        Well documented
      • 1
        "Free", "Hackable", "Open Source", The Awesomness
      • 1
        works with GitLab
      • 1
        full support
      • 1
        vim support
      • 1
        Split-Tab Layout
      • 1
        Consistent UI on all platforms
      • 1
        User friendly
      • 1
        Hackable and Open Source
      • 1
        Made by github. YAY
      CONS OF ATOM
      • 19
        Slow with large files
      • 7
        Heavy and slow
      • 6
        Slow startup
      • 1
        Most of the time packages are hard to find.
      • 1
        Can be easily Modified

      related Atom posts

      Jerome Dalbert
      Senior Backend Engineer at StackShare · | 12 upvotes · 384.5K 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 · 307.4K 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

      39
      159
      13
      Online VS Code Editor for Angular and React
      39
      159
      + 1
      13
      PROS OF STACKBLITZ
      • 7
        It just works
      • 3
        Can sign-in with third-party account. E.g. Github
      • 3
        Fast loading
      CONS OF STACKBLITZ
      • 1
        Only support projects scaffolded with @angular/cli

      related StackBlitz posts

      Glitch logo

      Glitch

      61
      123
      29
      The easiest way to build apps and bots
      61
      123
      + 1
      29
      PROS OF GLITCH
      • 10
        Bang! App built
      • 8
        Instant APPification ;)
      • 5
        Auto commits
      • 3
        No no. limitation on free projects
      • 2
        Easy to use
      • 1
        Very fast API creation. Especially for small apps
      CONS OF GLITCH
      • 2
        UI could be better / cleaner
      • 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

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

      related Visual Studio Code posts

      Simon Reymann
      Senior Fullstack Developer at QUANTUSflow Software GmbH · | 28 upvotes · 2.8M 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
      Software Engineer at Weedmaps · | 19 upvotes · 542.1K views

      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