I'm developing a web app and need to make a web page that should allow my users to make BNF or CNF formulas like the following:

enter image description here

Some colleagues suggested that I make the page in this way:

enter image description here

Summarizing, I have to add a select component for each element inside the the formulas. I don't like this and I want some suggestions (or examples) from you about this.

  • I'm guessing a drag-and-drop for components, operations, etc onto a canvas of some sort is a better option. Oct 10, 2014 at 9:47
  • @JimmyJunior Can you give me an example also through a picture?
    – Skizzo
    Oct 10, 2014 at 9:51
  • Why not just let them key it is with & for intersection | for union and ! for not. But don't ask what you call this (.
    – paparazzo
    Oct 10, 2014 at 12:47

1 Answer 1


One approach is to us a syntax highlighting tool that supports your grammars such as the extensible ace editor. This would guide the correct structure by flagging when BNF / CNF syntax is correct or not understood.

Extending this approach you can

  • add special symbols as buttons above editor box (just like the ux.stackexchange UI)
  • auto-prompt for symbols that are likely (see Sublime Text behaviour)
  • do real time validity parsing (on a per line basis)

Advantages of this UX include

  1. rapid entry for experienced users
  2. strong real-time guidance for less experienced users
  3. supports learning different components of a language (e.g. operator, identifier, etc )
  4. UI that looks like text as is presented in on-line/printed materials
  5. Ability to cut & paste into UI

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.