npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@blokkli/editor

v1.0.3

Published

Interactive page building experience for Nuxt

Downloads

344

Readme

blökkli page builder for Nuxt

Live Demo

blökkli is an interactive page editor that integrates with any backend and offers various features to edit content quick and easy.

Screenshot of the blökkli editor

Features

  • Smooth drag and drop editing
  • True WYSIWYG
  • Dynamic options for block apperance
  • Inline text editing (plain or rich text)
  • Multilanguage (both UI and content)
  • Nested blocks (for sections, grids, accordions, etc.)
  • Restrictions (allowed block types, cardinality, max instances)
  • Clipboard integration (paste text, images, links or copy blocks)
  • Comments
  • and many more

Comparison to other editors

The main difference to other WYSIWYG editors is that blökkli does not manage the data - it's just the editor. It provides a single interface (called adapter) to integrate any backend or data structure. Actually performing the mutations (like add, delete, move, setting options) is left to the adapter. In most cases an adapter method performs API calls, but it could as well all be done in the browser. In fact, the demo page / playground implements a reference adapter that stores mutations in local storage and keeps data in JSON files.

Integration with Nuxt

One of the main goals of blökkli is to offer a seamless integration with your new or existing Nuxt app. Creating new block components is straightforward. Options to change the appearance of a block are directly defined in the component, so is configuration that defines the behaviour of the block when rendered in the editor.

During normal rendering of blocks (not in the editor), the provided blökkli components and composables have a minimal overhead, to not have a negative impact on performance.

Backends

Currently blökkli ships with an adapter to integrate it with the paragraphs module of Drupal. The Paragraphs blökkli module implements all features available in the editor. It provides a new edit state entity that stores the applied mutations and implements a GraphQL schema extension to integrate the adapter.

Roadmap

blökkli is currently still in beta and therefore subject to change. If you're considering integrating it in production sites you should probably wait until the first stable release.

Acknowledgments

blökkli was developed by dulnan at Liip. The development was supported by the canton of Basel-Stadt in Switzerland as part of the relaunch project for WebBS.