🎨 Regex visualizer & editor

Overview

Regex-Vis

🎨 Regex visualizer & editor

Preview

Demo

Features

  • Regular expression visualizer
  • Visual editing regular expression
  • Testing regular expression

Blog

Deployment

To deploy this project run

# install dependencies, use pnpm!
$ pnpm install

# serve with hot reload at localhost:3000
$ pnpm start

Feedback

License

MIT

Comments
  • can't launch the service

    can't launch the service

    ./src/index.tsx Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer

    opened by allenhu12 4
  • Selection area is jumpy when mouse dragged over node

    Selection area is jumpy when mouse dragged over node

    When dragging the mouse to select some nodes, there's a "jump" in the selection <div> when the mouse moves over the "hitbox" of <text> or its wrapping <g>, and/or perhaps the children <tspan>:

    <g font-size="16" transform="translate(25.75,20)">
        <text class="text" dy="0" text-anchor="middle" font-size="16">
            <tspan class="quote">" </tspan><tspan>a</tspan><tspan class="quote"> "</tspan>
        </text>
    </g>
    

    regex-vis

    bug 
    opened by BryghtShadow 3
  • Visual link between the visualization and the regex

    Visual link between the visualization and the regex

    A visual link between the visualization and the regex would help to see what's going on - either (a) when you click a section of the visualization, it could highlight/bold/underline in the regex text, or perhaps (b) the different parts of the visualization could have (toggleable) persistent highlighting in the regex, similar to what regex101.com does.

    enhancement 
    opened by RheingoldRiver 2
  • error occurs when executing

    error occurs when executing "pnpm install"

    @Bowen7 when I execute "pnpm install", an error occurs. The error can be described as follows:

    ............  
    
    Progress: resolved 1787, reused 0, downloaded 1571, added 1785  
    Progress: resolved 1787, reused 0, downloaded 1571, added 1786  
    TypeError: Cannot set property name of  which has only a getter  
        at err (/usr/local/node-v14.19.1-linux-x64/lib/node_modules/pnpm/dist/pnpm.cjs:12443:20)  
        at runPnpm (/usr/local/node-v14.19.1-linux-x64/lib/node_modules/pnpm/dist/pnpm.cjs:182389:5)  
        at runMicrotasks (<anonymous>)  
        at processTicksAndRejections (internal/process/task_queues.js:95:5)  
        at async /usr/local/node-v14.19.1-linux-x64/lib/node_modules/pnpm/dist/pnpm.cjs:182379:7  
    

    I wonder what I did wrong during the installation. Thanks a lot!

    opened by Staceycgc 2
  • [BUG] 过长的正则生成的图无法左右滑动

    [BUG] 过长的正则生成的图无法左右滑动

    问题描述

    • 正则太长,生成的图宽度很大,无法左右滚动查看看完整的图

    问题截图

    • image

    参考正则

    • ^avhls/(?<format>m3u8)(?:/segtime/(?<segtime>\d+))?(?:/ss/(?<ss>\d+)/t/(?<t>\d+))?(?:(/ab/(?<ab>\d+))|(/aq/(?<aq>\d+)))?(?:/ar/(?<ar>\d+))?(?:/r/(?<r>\d+))?(?:/vb/(?<vb>\d+))?(?:/vcodec/(?<vcodec>libx264|libvpx|libtheora|libxvid))?(?:/acodec/(?<acodec>libmp3lame|libfdk_aac))?(?:/s/(?<sWidth>\d?)x(?<sHeigth>\d?))?(?:/play/(?<play>[^/]+))?(?:/outKey/(?<outKey>[^/]))?(?:/pattern/(?<pattern>[^/]))?(?:/?)$
    bug 
    opened by yinxulai 1
  • Create permalinks that include test cases

    Create permalinks that include test cases

    This would be a helpful feature for sharing links to WIP regexes - the URL doesn't need to auto-update to include them, but it would be great to have the option to generate a permalink that includes test cases

    enhancement 
    opened by RheingoldRiver 1
Owner
Bowen
Software engineer. OSS 🏄.
Bowen
A chainable router designed for Next.js api. inspired and regex based from itty-router

Next.js Api Router A chainable router designed for Next.js api. inspired and regex based from itty-router Features Tiny (~8xx bytes compressed) with z

Aris Riswanto 1 Jan 21, 2022
This package is for developers to be able to easily integrate bad word checking into their projects.\r This package can return bad words in array or regular expression (regex) form.

Vietnamese Bad Words This package is for developers to be able to easily integrate bad word checking into their projects. This package can return bad

Nguyễn Quang Sáng 8 Nov 3, 2022
Fiz uma validação de senhas no Front-End usando RegEx!

Seja bem vindo a um dos meus #JokeCodes Nesse código vou te mostrar como fazer uma validação de senha no Front-End, com feedback na tela de login!, us

JOÃO PSTER 3 Oct 5, 2022
microregex is an open source and highly curated catalog of regular expression patterns. It offers programmers RegEx snippets that can be quickly exported into a variety of programming languages and distributed around teams.

microregex - A catalog of RegEx patterns View Demo · Report Bug · Request Feature Loved the tool? Please consider contributing ✍️ to help it improve!

Sunit Shirke 4 Oct 25, 2022
Algorithm visualizer made with React, Material UI and P5JS.

Made with React, P5JS and Material UI. Link https://andresrodriguez55.github.io/algorithmsVisualizer/#/ Description The purpose of doing this was to l

Andres Arturo Rodriguez Calderon 31 Nov 22, 2022
A visualizer that parses CSV data and renders it in a table in Postman or in a browser.

Postman CSV Visualizer A visualizer that parses CSV data and renders it in a table in Postman or in a browser. Example Using the Visualizer in Postman

Philippe Ozil 18 Dec 10, 2022
Visualizer for neural network, deep learning, and machine learning models

Netron is a viewer for neural network, deep learning and machine learning models. Netron supports ONNX, TensorFlow Lite, Caffe, Keras, Darknet, Paddle

Lutz Roeder 21k Jan 5, 2023
The visualizer is a tool developped by the cheminformatics department of the Swiss Federal Institute of Technology

Concept The visualizer is a tool developped by the cheminformatics department of the Swiss Federal Institute of Technology. We promote the development

Norman Pellet 31 Sep 13, 2022
Logseq property visualizer

logseq-property-visualizer A plugin to chart or visualize trends in the values of page properties over time. Setup First ensure that you have hkgnp's

null 19 Dec 20, 2022
Sorting visualizer to introduce students to different sorting algorithms, how they work, and how to apply them

sorting-visualizer Sorting visualizer to introduce students to different sorting algorithms, how they work, and how to apply them Iteration 1 Demo: ht

Aditya Malik 1 Nov 14, 2022
Path-finding & Sorting algorithms Visualizer

Update - Changelog ?? 09.05.2022 AlgoVision is now fully mobile-responsive for all its features ! On mobile, the 'Mouse Chase' option in Dynamic Mode

Eliya Shalom 23 Dec 18, 2022
A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas.

Audio Visualizer JS A graphical web-based audio visualizer which reads music data using Pure JavaScript, and draws a graphical view in Canvas. Demo: h

Max Base 9 Aug 9, 2022
Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.

Wave.js Audio visualizer library for javascript. Installation Install With CDN <script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.

Austin Michaud λ 497 Dec 21, 2022
Lumos is an AWS Lambda visualizer and open source alternative to AWS CloudWatch.

Lumos Lambda Metrics Visualizer Table of Contents About Lumos Techologies Used Getting Started Key Lambda Metrics How to Contribute License Contributo

OSLabs Beta 36 Nov 5, 2022
A SolidJS signal tracking dependency & structural visualizer developer tool

Solid JS DevTool Developer tool that visualizes Solid's signal architecture, including the components. It can be added to any Solid JS application. In

OSLabs Beta 58 Nov 5, 2022
A markdown editor. http://lab.lepture.com/editor/

Editor A markdown editor you really want. Sponsors Editor is sponsored by Typlog. Overview Editor is not a WYSIWYG editor, it is a plain text markdown

Hsiaoming Yang 2.8k Dec 19, 2022
Override the rich text editor in Strapi admin with ToastUI Editor.

strapi-plugin-wysiwyg-tui-editor ⚠️ This is a strapi v4 plugin which does not support any earlier version! A Strapi plugin to replace the default rich

Zhuo Chen 12 Dec 23, 2022
A chrome extension which helps change ace editor to monaco editor in web pages, supporting all features including autocompletes.

Monaco-It Monaco-It is a chrome extension turning Ace Editor into Monaco Editor, supporting all features including autocompletes. 一些中文说明 Supported Lan

null 3 May 17, 2022
Replaces the default Strapi WYSIWYG editor with a customized build of CKEditor 5 html editor packed with useful plugins.

CKEditor 5 for Strapi Replaces the default Strapi WYSIWYG editor with a customized build of CKEditor 5 packed with useful plugins. ?? Get Started Feat

null 39 Jan 2, 2023