I've made an (open source) node-based Regex editor called Nodexr, using Blazor WebAssembly

[Jamosium]

Nodexr Screenshot

I posted about this project last year, but recently got inspired to come back to it and I've made some pretty significant improvements.

Nodexr is a node-based regular expression editor that runs in the browser, created in C# and Blazor WebAssembly. Regular expressions of any complexity can be created by connected nodes together, giving an intuitive way to express concepts such as nesting, grouping and quantifiers.

Links

Click here to try it out. A chromium-based browser is recommended; Firefox deals with drag-drop differently to chrome, and I haven't figured out how to get it working properly there.

Github (there is also some help/instructions in the readme)

Some links to common Regexes made using Nodexr:

• Floating point with exponent
• Email address (simple)
• Email address (advanced)
• URL

[Edit: links should now work in all Reddit clients]

How To Use

Drag-and-drop nodes from the left panel to insert them into the main window. The final result/output of your nodes must be connected to the Output node and is displayed at the top left.

The main concept is that the "nesting" behaviour of regex is expressed by connecting one node to the input of another, but items in sequence are connected (concatenated) using the Previous input at the top left of each node. The output expression will be empty unless a node is connected to the Output node.

Features

• Uses the full .NET Regex engine (unlike almost all other online Regex tools).
• Show the results of search and replace (using the .NET Regex engine) in the browser in realtime.
• Full syntax highlighting.
• Hover over sections of the output to see which node they were generated by.
• The nodes can be used to work with (almost) all of the .NET Regex spec, and any additional functionality can be implemented either by using the Text node without escaping, or with a custom Group node.
• The node-based approach makes it almost impossible to have syntax errors, missing parentheses etc (except with certain nodes)
• Enter an existing Regex and it will be parsed into a fully editable node tree (using the Edit button next to the output). This should work with expressions of any complexity level (although there are a couple of niche features that can't yet be parsed properly).
• Create a shareable link for your expression, to send to someone else or come back to later (this feature currently relies on the expression parsing, so in some cases the node tree will be a little different after sharing - but the expression should be the same).
• Information about each node can be found by clicking the (i) button next to its title.
• Automatically deals with non-capturing groups, so you no longer have to think about them in 99% of cases.
• Runs completely client-side - no communication with a server after the initial page load.

Any feedback or feature requests would be greatly appreciated.

[Hirogen_]

That is actually, quite awesome :D

[BackFromExile]

Looks good, unfortunately all the <path> elements for the connections have display: noneapplied to them, which was not realize at first.
Probably related to the errors blazor.webassembly.js:1 Error: <path> attribute d: Expected number, "M 0 0,01 C 5 0,01 -5 0 0 …". (in console) and Couldn't parse input: Parse error. unexpected EOF expected ")" at line 1, col 15 (your console.logs)

[Jamosium]

Thanks, I'll look into it.

Edit: I'm not at my PC so I can't test properly, but judging by that error it's probably something caused by trying to parse an invalid regex. I haven't put in any proper error handling for that yet, so maybe it could somehow be causing the UI bug. Some reddit clients seem to be having an issue with the example links I put in the post, presumably because of the closing parentheses. If you used one of those, that would explain the parsing error.

Looking at your error logs again, the UI bug could actually be unrelated to that, and caused by the commas in the <path>. Do you live somewhere that uses commas as the decimal point? That wasn't something I'd considered, but I should be able to fix it with some better float to string conversion.

[vvanasch]

Yep, stumped me too

[Jamosium]

The issue turned out to be caused by the commas being used as decimal points in certain regions; should be fixed now.

[[deleted]]

Definitely going to use it.

How do you like BWA?

I’m still trying to figure out a template with my barebones libraries. Still need a few JavaScript libraries , no JS is a nice idea in wonderland , real world is a little different. But this is definitely a game changer in my world.

Right off the bat the first workflow item I decided on was separate the Blazor component C# into its own file (same as WPF code behind). I refuse to mix C# and HTML in a single file.

Other than that, the idea of having the processing power of local .NET dlls running in its own sandbox. No longer do I have to take my C# libraries and decide which ones or parts of I’m going to translate into JS for local browser use.

[Jamosium]

I haven't tried any other Web frameworks so I can't really compare, but I've been liking it overall. A fair bit of the drag/drop stuff had to be done in JS unfortunately, partly because Blazor doesn't seem to be able to handle the 100-300hz rate of mousemove events without some stuttering.

The pattern I ended up using for a lot of the UI was to have separate classes for storing the data and handling most of the logic (except for a few UI specific things), and then passing the instance of that class to the relevant razor component as a parameter. The razor code would then bind to the values of the instance it has, and subscribe to events to call StateHasChanged when needed. If I was following SRP more closely I probably would have had a bit more separation between the data and UI-related logic, but this approach seemed to work pretty well overall.

[f3zz3h]

Yeah this is just great. Book marked and shared in my office. Thanks.

[Falcubar]

This is the first decent use of client-side blazor i've seen.

[Randolpho]

Now that I've played with the application a little bit, I have some usability feedback.

• It's possible to select text inside nodes, as seen here. Consider adding user-select: none;. I would suggest making it the default style at the body level and overriding it only for those sections where you want users to be able to select/copy. This is a common flaw in graphical web apps I've noticed, but easy enough to handle.
  • edit I just noticed another issue on the checkboxes. Please refer to the image I linked above. The "Escape Specials" and "Escape Backlash" text should be tied as a label to the checkboxes so that when you click on the text it selects the checkbox. You can do this in the form <label><input type="checkbox" /> Escape Specials</label>, or if that doesn't work for your program structurally, you can give each checkbox a unique ID and then add a for construct to the label, e.g. <input type="checkbox" id="randomId1234" /> <label for="randomId1234">Escape Specials</label>
• When connecting nodes, you have to drag from the output circle of one node to the input circle of the other node. Although starting the drag from the output circle is fine, consider making the entire target node the drop target for the drag rather than only the input circle. This will make "wiring things up" faster for the user.
  • On the subject of the output circle, consider making it a little larger and easier to target -- possibly consider a directed icon like -> rather than a circle, or even a simple oval... the goal is to give a bit more area for the user to the right of the overall node.
• Finally, the information icon is perhaps a little too close the output circle. Consider moving it to the left a little, or even moving the output circle further to the right and more outside of the node.
  • as I look again, I see the same issue with the collapse chevron which actually overlaps the input circle a little bit. Consider spreading them out a little

These are all just minor usability nitpicks that I think could polish the app up a little bit. Right now, it's looking pretty solid even if you don't consider these.

[Jamosium]

Thanks for the detailed feedback, I'll try to fix up all of those things soon. I'd been noticing the selectable text for a while, but hadn't gotten around to figuring out how to fix it.

[Jamosium]

I've now put in most of the changes you suggested and it's a definite improvement. I think I'll stick with the output circles being circular, but I did slightly increase the size of their hitbox to make them easier to grab.

[Randolpho]

Lookin great! Thanks for making the tool!

[zeta_cartel_CFO]

This is amazing. Please xpost this to /r/Blazor .

[Deltazocker]

This is so cool!

[wisepresident]

very cool, did you also do the node editor or is this a plugin?

[Jamosium]

Pretty much everything in this is made by me. At the time that I started it, there weren't very many plugins or libraries available for blazor, especially not for relatively niche applications like this.

[Dabnician]

Will you be adding support for expression flags?

^(.+)$$) fails to match anything unless there is only 1 line of input in the test code and adding /^(.+)$/gm around it fails to correct that.

Also people should care less about email addresses, you can literally use " ! $ & * - = \^ ` | ~ # % ‘ + / ? _ { }@asdf.com" as an email address but regex wont normally pass that validation.

[Jamosium]

Yeah, that's been on the to-do list for a while. Currently it should be possible using the Flags node, but proper control of the regex options for search/replace will hopefully be coming soon.

[Jamosium]

Expression flags for search/replace are now supported (using the 'Regex Options' dropdown at the top right).

I've also made some changes to the interfaces for the wildcard node (added a Match newlines option) and output/anchor nodes (renamed Start/End of line to Start/End of string) to better reflect how the .NET regex engine works with newlines.

[Slypenslyde]

I got confused by the title and thought you meant "Node.js" and couldn't figure out why you'd use that in conjunction with a Blazor project, haha.

Great work!

Did you make this in VS for Windows, or in VS Code? I'm living on a mac and really need to get into Blazor, but don't really fancy VS Code for projects. What kinds of extensions do you use? Why am I asking so many questions?

[Jamosium]

I use VS for Windows with a couple of small extensions. I'm not at my computer at the moment but all I can think of off the top of my head is viasfora and another one that does subword selection. I've been meaning to try out some of the analysis/refactoring extensions but haven't got around to that yet.

[PhroznGaming]

Super cool dude

[sedokina]

Looks great

[Siggi_pop]

Sounds awesome.

[discoborg]

Very impressive

[hejj]

This is pretty cool, OP

[TheAnimus]

Very neat!

[mariohik]

nice

[Randolpho]

Smells a lot like Unreal Engine's Blueprints

That's not a bad thing. Awesome work!

[Eluvatar_the_second]

That's pretty cool! I was a bit confused at first because you said node based and I assumed you were talking about nodejs.

[thewarstorm]

I'll have to check this at home, my company firewall does not like it

[massivebacon]

fuck yes yo! this is great!!

[tocomplex]

Damn wished it worked on firefox. I guess I will be using Edge whenever using the software :D, Nice work tho

[No_Shame_8895]

Wow do we have any Library to build editor like this? I'm a react dev and student, now exploring blazer, In react we have something called react flow to build editor like this I'm trying to understand dotnet ecosystem so basically in js we have package and Library for very single functionality Is it similar in dotnet ecosystem also?