Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

block-template-html

Package Overview
Dependencies
Maintainers
6
Versions
70
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

block-template-html

Block Protocol block template for an html-based block

  • 0.1.10-canary-20230208150010
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
6
Weekly downloads
 
Created
Source

Block Protocol template: HTML

Step one: copy this template

See https://blockprotocol.org/docs/developing-blocks

TL;DR: Run npx create-block-app@latest [your-block-name] --template=html

Other templates are available. See npx create-block-app@latest --help

Step two: write and build a component

  1. Change into the folder: cd path/to/your-block-name

  2. Update block-metadata.json and block-schema.json to define your block's metadata and the properties it takes.

  3. Write your block starting in app.html. To test it during development:

    • edit dev/index.html to give your block starting properties

    • run the dev server with yarn dev (or npm run dev)

  4. When finished, run yarn build (or npm run build), which:

    • Bundles the component into a single source file
    • Once uploaded to a remote folder, embedding applications can access block-metadata.json to load a block and its schema. This file is documented in full here.

Please see the Block Protocol docs for help in creating and updating data from your block.

You can format your code using yarn format (or npm run format).

N.B.

Step three: publish your block

Head over to blockprotocol.org to read instructions on publishing your block.

External Dependencies

This template assumes there is no bundling process. You will need to reference external dependencies using ES Modules. Tools like esm.sh or unpkg.com can make this much easier.

The Block Protocol does not currently support externals when using HTML blocks.

Debugging

The component can be debugged locally by first starting yarn dev.

Now (using VS Code), go to the Debug tab, select "Launch Chrome" and start the debugger (F5).

You should now be able to set breakpoints and step through the code.

Keywords

FAQs

Package last updated on 08 Feb 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc