SafetyHQ Form.io Workbench

HTML stays HTML. Bootstrap stays Bootstrap.

Build the content in the editor first, then apply Bootstrap classes separately for Form.io's Custom CSS Class field. The HTML output is never modified by the Bootstrap selections.

Display > Content Display > Custom CSS Class IndexedDB Local Only
Applied Bootstrap No classes selected.
Applied Count 0 classes

HTML Workspace

Edit content and copy the wrapped output for Form.io HTML Element > Content.

HTML Element Content

Legacy wrapped HTML for the Form.io HTML Element component.


                                

                                    No editor content yet.
                                    HTML Element > Content
                                

                            

                        

                    

                


                

                    

                        

                            

                                
Bootstrap Workbench

                                
Apply Bootstrap classes without touching the HTML

                                

                                    The preview shell wraps the current editor HTML. Style choices never rewrite the HTML inside it.
                                

                                
Preview updates as you edit. Save styles to include them in Favorites/Export.

                            

                            Styles are saved
                        

                        

                            

                                
                                
                            

                        

                    

                    

                        

                            

                                

                            

                            

                                

                                    
Live Preview

                                    
The preview shell uses your current style selections. The HTML inside it is not rewritten.

                                    
                                    
                                    
Manual edits update preview and copy output immediately.

                                    

                                        

                                    

                                

                                

                                    

                                        

                                            
Bootstrap Classes

                                            
Paste this into Form.io Display > Custom CSS Class.

                                        

                                        
                                    

                                    
                                    

                                        No Bootstrap classes selected.
                                        Display > Custom CSS Class
                                    

                                    

                                        
                                        
                                    

                                

                            

                        

                    

                

            


            

            

                

                    

                        
Favorites

                        

                            Favorites save the editor HTML and committed Bootstrap selections together.
                        

                    

                    

                        
                        
                        
                    

                

                

                    

                        
Favorites

                        0 saved