This document outlines a major project to build a web interface builder API. The tool will allow users to dynamically build websites more efficiently through a GUI with real-time code editing. It will use the Twitter Bootstrap CSS framework. Key features will include an HTML editor, drag-and-drop components, HTML code generation, and real-time editing. The tool aims to be faster and more reliable than similar products like Divshot and Jetstrap. Potential problems to address include the user workspace, design issues, security, and compatibility with small devices.

1. Major Project 2013-14
semester 8
Mentor-:
Ms. Aditi Sharma
Made by-:
Parag Garg(10503886)
Rishi Bhardwaj(10503869)

2. TOPIC
WEB INTERFACE BUILDER

3. Problem Statement
Web interface builder is a website builder
API which will provide users an interface to
build websites dynamically and more
efficiently. It will allow the users to build a
GUI of web page with real time code editing.
It will be faster and more reliable.

4. Pre-Requisite
1. Wamp server
2. Adobe Dreamweaver
3. Twitter Bootstrap css framework

5. Previous Work
Some websites provide facility to develop website using their tool
but they do not provide source code of web application. We have
find two websites that are working on our idea and these
websites are in development stage.

6. Approach
• We are using twitter bootstrap as our css framework its an
open source framework .bootstrap provide all types of css
design for navigation bar, button,input box,forms,grid etc.

7. WORKING OF WEB
INTERFACE BUILDER
1) Html Editor
In our web application we are developing a html text editor so
that user can edit the all the html and css attribute in real time.
Users no need to refresh the page to check the output. This
thing will be helpful for user if user want to make GUI according
him using his own coding.
2) Twitter bootstrap support:-
It contains HTML and CSS-based design templates for
typography, forms, buttons, charts, navigation and other
interface components, as well as optional JavaScript extensions.
We are adding bootstrap because Its most powerful css
framework and used most commonly

8. 3) Drag and Drop for components:-
Using this tool user can drag and drop all the html components
to create his web page. So it will be easy for user to add any
components and just drop where user wants the components.
4)Html Code Generator:-
By adding the components using drag and drop tool user can
generate the code of web page and can download it so that user
can upload it anywhere without limitations.

9. 5) HTML Complier
Html compiler will compiler html code that user write in text
editor so user no need to write code in text file and run it on
browser to test html code user can directly write code to text
editor.
6) Real Time Editing
Out put of text editor directly generated to same web page so
user don’t need to reload webpage to view output and when
user add some element to web page then its source code
generate without reloading webpage.

10. 7) Editing content
Users can directly edit the content of web page that user design
by double clicking on it.

11. Feature comparison with divshot and jetstrap
Common Features
• Drag and drop
• Framework support
• Real time code editing
• Multi device support
• Code generator
• Code beautifier

12. Unique Features
• Full screen support
• Space to work
• Fast and responsive
• Code inspector
• Css inspector
• Element inspector
• Css framework development

13. Problems
• User workspace
• Designing problem
• Security
• Web page design
• Problem with small devices