How to embed StackBlits to Hashnode

You can embed a StackBlitz project into Hashnode using an iframe, by following these steps:

  1. Go to your StackBlitz project and click on the "Share" button in the top right corner.

  2. Copy the Editor URL provided in the "Share" section.

  3. Go to your Hashnode account and create a new blog post.

  4. In the post editor, type "/" and select HTML

  5. Paste the code you see below in the HTML block provided.

<iframe src="https://stackblitz.com/edit/your-project-name?embed=1" width="600" height="400"></iframe>

In this example, the src attribute specifies the URL of the StackBlitz project you want to display within the iframe, and width and height attributes specify the width and height of the iframe in pixels, respectively. Replace "your-project-name" with the actual name of your StackBlitz project.

Note: You can adjust the width and height of the iframe by modifying the values of the width and height attributes in the iframe code, respectively. Also, keep in mind that some StackBlitz projects may not display properly within an iframe, and you may need to adjust the project to make it work within the iframe.

Here is an example:

0
Subscribe to my newsletter

Read articles from {{ MonaCodeLisa }} directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

{{ MonaCodeLisa }}
{{ MonaCodeLisa }}

Hello, I'm Esther White, I am an experienced FullStack Web Developer with a focus on Angular & NodeJS.