Alternatives to CodePen logo

Alternatives to CodePen

GitHub, CodeSandbox, Codeanywhere, JSFiddle, and Atom are the most popular alternatives and competitors to CodePen.
138
199
+ 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

230.9K
197K
10.2K
Powerful collaboration, review, and code management for open source and private development projects
230.9K
197K
+ 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
  • 864
    Easy setup
  • 502
    Issue tracker
  • 484
    Great community
  • 480
    Remote team collaboration
  • 449
    Great way to share
  • 440
    Pull request and features planning
  • 144
    Just works
  • 131
    Integrated in many tools
  • 118
    Free Public Repos
  • 114
    Github Gists
  • 109
    Github pages
  • 82
    Easy to find repos
  • 61
    Open source
  • 59
    It's free
  • 59
    Easy to find projects
  • 56
    Network effect
  • 48
    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
  • 22
    Clean interface and good integrations
  • 19
    Learn from others source code
  • 15
    Because: Git
  • 14
    It integrates directly with Azure
  • 9
    Standard in Open Source collab
  • 9
    Newsfeed
  • 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
    It's awesome
  • 5
    Integrations
  • 5
    Graphs
  • 5
    Nice API
  • 4
    Quick Onboarding
  • 4
    Remarkable uptime
  • 4
    Hands down best online Git service available
  • 4
    CI Integration
  • 4
    Reliable
  • 3
    Loved by developers
  • 3
    Free HTML hosting
  • 3
    Security options
  • 3
    Simple but powerful
  • 3
    Uses GIT
  • 3
    Unlimited Public Repos at no cost
  • 3
    Version Control
  • 3
    Easy to use and collaborate with others
  • 2
    Nice to use
  • 2
    IAM
  • 2
    Ci
  • 1
    Easy and efficient maintainance of the projects
  • 1
    Good tools support
  • 1
    Beautiful
  • 1
    Free HTML hostings
  • 1
    Self Hosted
  • 1
    All in one development service
  • 1
    Easy to use
  • 1
    Easy source control and everything is backed up
  • 1
    Leads the copycats
  • 1
    Never dethroned
  • 1
    IAM integration
  • 1
    Issues tracker
  • 1
    Very Easy to Use
  • 1
    Easy deployment via SSH
  • 1
    Free private repos
  • 0
    Profound
CONS OF GITHUB
  • 51
    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
    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

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 · | 29 upvotes · 4.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

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

related CodeSandbox posts

Codeanywhere logo

Codeanywhere

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

    related Codeanywhere posts

    JSFiddle logo

    JSFiddle

    32
    63
    0
    An online code editor
    32
    63
    + 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

      15.3K
      13.2K
      2.7K
      A hackable text editor for the 21st Century
      15.3K
      13.2K
      + 1
      2.7K
      PROS OF ATOM
      • 527
        Free
      • 447
        Open source
      • 342
        Modular design
      • 320
        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
        TypeScript editor
      • 5
        Nice UI
      • 5
        Multicursor support
      • 3
        Open source, lots of packages, and so configurable
      • 3
        Snippets
      • 3
        Chrome Inspector works IN EDITOR
      • 3
        Simple but powerful
      • 3
        cli start
      • 2
        It's powerful
      • 2
        Smart TypeScript code completion
      • 2
        Well documented
      • 2
        Code readability
      • 2
        Awesome
      • 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
      CONS OF ATOM
      • 19
        Slow with large files
      • 7
        Slow startup
      • 2
        Most of the time packages are hard to find.
      • 1
        Cannot Run code with F5
      • 1
        Can be easily Modified

      related Atom posts

      Jerome Dalbert
      Senior Backend Engineer at StackShare · | 13 upvotes · 621.4K 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 · 514.6K 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

      59
      230
      13
      Online VS Code Editor for Angular and React
      59
      230
      + 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
        Cannot upload Images
      • 1
        Not able to upload Images
      • 1
        Only support projects scaffolded with @angular/cli

      related StackBlitz posts

      Glitch logo

      Glitch

      70
      157
      41
      The easiest way to build apps and bots
      70
      157
      + 1
      41
      PROS OF GLITCH
      • 12
        Bang! App built
      • 9
        Instant APPification ;)
      • 6
        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
        Not good for big projects
      • 1
        Cannot delete project, only the source code is

      related Glitch posts

      Visual Studio Code logo

      Visual Studio Code

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

      related Visual Studio Code posts

      Simon Reymann
      Senior Fullstack Developer at QUANTUSflow Software GmbH · | 29 upvotes · 4.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

      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