- What is CodePen?
- How to Export Your Pen from CodePen
- Hosting Your Pen on Tiiny.host
- Hosting on Tiiny.host
- BONUS: Edit Your Pen on Tiiny.host
- Next Steps
- FAQ: CodePen and Tiiny.host
- Can I host CodePen pens on Tiiny.host?
- How do I export my CodePen pen for hosting on Tiiny.host?
- Can I use custom domains with pens hosted on Tiiny.host?
- How do I share my hosted pen with others?
- Are there analytics available for pens hosted on Tiiny.host?
- Can I set my hosted pen to private on Tiiny.host?
CodePen allows you to easily code, script, test, and share your “Pens” using a developer interface.
But what if you want to share your results online without showing the detailed technical interface used to program your Pen? You can’t do that on CodePen.
This is a problem Tiiny.host solves quickly.
With Tiiny’s simple, automated hosting platform, you only need to drag and drop your exported Pen onto the Tiiny.host homepage, enter a name, and click a button.
In seconds, your Pen is live online.
That’s it.
Now, you can share it anywhere.
You’ll see. I’ll walk you through it.
New to CodePen? We’ll start with a little background context.
What is CodePen?
Since 2012, CodePen has been growing.
Over 300,000 strong, CodePen is a thriving community of web developers, front-end designers, user interface experts, and HTML, CSS, and JavaScripters.
Anything you can do with HTML, CSS, and JavaScript can be done in CodePen—all with an intuitive developer interface.
Here is an example of a Pen designed and coded by Marco Guglielmelli and available on CodePen.
Nice work, Marco! (@MarcoGuglielmelli)
Notice the scripting panels on top and the results below.
But if you’re interested in sharing only the results of your work, you’re out of luck on CodePen.
No worries. Tiiny.host has got you covered.
How to Export Your Pen from CodePen
It’s easy to export your Pen to a zip file. That’s what we’ll do now.
On the developer interface, look to the bottom-right of the screen. There, you’ll find the Export button.
Clicking the Export button brings up the Export menu.
- Click on “Export .zip”
Now, a file dialog box appears.
- Save the zip file to your storage.
Remember where you put it!
You’ll need it in the next step.
Hosting Your Pen on Tiiny.host
Navigate to the folder or directory where your exported Pen zip file is located. We’re going to open it up and compress only the part we need.
It’s simple.
Prepare your zip file
When you open the Pen zip file, you’ll see the contents. It looks like this:
You’re going to zip the “dist” folder. There’s no need to rename it.
On most computers, you can right-click and find the “compress” menu choice. Select “compress” (or do what is required on your platform) and zip the dist folder.
Now, let’s see how fast we can get that zip file live online.
Hosting on Tiiny.host
Visit Tiiny.host.
Tiiny.host’s automated platform is the simplest way to host and share your web projects, including your Pens.
All that’s left are three steps.
- Give your new Pen website a name.
- Drag and drop your Pen’s zip file onto the form.
- Click the “Upload file” button.
At this point, you’ll sign in or register for a free account.
Yes, free.
You can host one pen for free for as long as you have an account with us.
This free tier is perfect for testing ideas or hosting something temporarily or long-term.
We have more advanced features as well. Check them out.
Seconds later…
This screen celebrates your hosting victory.
Your Pen is live online.
Here, you can see the link for your site, copy the link, or generate a QR code in one click.
Think of the possibilities.
It’s time to share your Pen with your audience.
Sharing Your Pen on Tiiny.host
Since you now have an account on Tiiny.host, you can visit your dashboard. Its minimalist design is easy to use and understand.
I’ve outlined the relevant sharing icons below.
- BLUE: Copy the link to your Pen
- GREEN: One-click QR generation.
Okay. You’re set to share the link in email, social media, professional communities, with clients—anywhere.
Use the QR code in marketing or visual communications. Your audience scans the code with their smartphone and taps the resulting link.
Try it now!
See? Tiiny.host is the fastest and simplest way to host and share your web projects.
BONUS: Edit Your Pen on Tiiny.host
Your Pen may need editing. Just a little typo or some code that doesn’t quite do what you want.
We can help.
With our paid Solo and Pro tiers, you can edit your site and see the results as quickly and easily as you can in CodePen.
Why go back and forth? Just edit your Pen right here on Tiiny.host.
Tiiny.host Advanced Features
There’s more to our platform than just hosting, sharing, and editing.
Yes, you can have one site for free, indefinitely. Swap out the contents as much as you like. Just click the “Update” button.
For as little as $5 a month (our Tiny tier), you can:
- Remove the Tiiny.host banner, which appears on the free account.
- Get built-in site analytics to keep track of your page views, visitors, and sessions.
- Support up to 10,000 visitors per month.
Our more advanced Solo and Pro tiers offer:
- Everything in the Tiny tier
- More active sites per month, up to 12.
- Custom domain names
- Edit mode (if your HTML, CSS, or JavaScript needs work)
- Integrations (Zapier)
- Supports up to 500,000 visitors per month.
I think you’ll agree that Tiiny.host has budget-friendly pricing for anybody seeking professional web hosting and sharing.
Next Steps
If you have questions about CodePen, hosting on Tiiny.host, or anything internet-related, we can help.
Contact our awesome customer service team.
We’re here for you, free of charge. No worries.
Host a project for free on Tiiny.host today.
FAQ: CodePen and Tiiny.host
Can I host CodePen pens on Tiiny.host?
Yes, you can host CodePen pens on Tiiny.host by exporting your project from CodePen and uploading the files to Tiiny.host.
How do I export my CodePen pen for hosting on Tiiny.host?
In CodePen, open the pen you wish to export, click the “Export” button at the editor’s bottom right corner, and select “Export .zip.” This will download your project as a ZIP file, which you can upload to Tiiny.host.
Can I use custom domains with pens hosted on Tiiny.host?
Yes, Tiiny.host allows you to use custom domains with your hosted projects, including pens exported from CodePen.
How do I share my hosted pen with others?
Once your pen is hosted on Tiiny.host, you will receive a unique URL for your project. You can share this URL with others to showcase your work. You can generate a QR code with one click.
Are there analytics available for pens hosted on Tiiny.host?
Yes, Tiiny.host provides built-in analytics for hosted projects, allowing you to track views and other engagement metrics.
Can I set my hosted pen to private on Tiiny.host?
Tiiny.host offers privacy settings for your hosted projects, including the ability to make them password-protected, depending on your subscription plan.
